angular-template

I tried to implement a grid component with a structured data containing columns definition and its data array . There is a callback function in the definition of each column, to customize displaying the value of that column. Inside of each callback , it called a console.log() to show me how many times the callback function will be called. I don't know why callback function called four times in the beginning, and two times after changeSort() event fired !! Please let me know. I wrote the following table component: import { Component, OnInit, Input } from '@angular/core'; @Component({ selector:

I have created a pager widget using template file which I am using twice in my HTML page. I have a select for go to page option and also links for previous and next page. Problem is that when I use select box for updating current page its updated and then I use previous and next page links, the current page gets updated but select box doesn't get updated. Please tell me what I am doing wrong. Is there any logical mistake in my approach to building a pager widget like this? Controller Code: var gallery = angular.module('gallery', []); gallery.controller('ItemListCtrl', ['$scope', function(

When ever there is a template error in angular 2, the entire application fails to work. Shouldn't only the component that had the template that caused the error, fail to work and the rest of the application be working fine? How to handle errors so that the application won't stop being responsive when an error occurs? You can use custom ErrorHandler : class MyErrorHandler implements ErrorHandler { handleError(error) { // do something with the exception } } @NgModule({ providers: [{provide: ErrorHandler, useClass: MyErrorHandler}] }) class MyModule {} Using ? mark is a solution around this while

This question already has an answer here: Passing ngFor variable to an ngIf template 3 answers I am trying to build this template: <ul> <li *ngFor='let link of links'> <ng-container *ngIf="link.type == 'complex'; then complexLink else simpleLink"></ng-container> </li> </ul> <ng-template #simpleLink> ... {{ link.some_property }} </ng-template> <ng-template #complexLink> ... {{ link.some_property }} </ng-template> The problem is that the link variable is undefined inside the ng-template so I get an error of accessing 'some_property' of undefined. I am struggeling to understand how I pass the

im trying to hide unused items from ngFor, the problem is, i did hide it successfully but its place still exists and empty like the image below: My ts file: coupon: any; couponz() { var data=[]; for (let co of this.shared.couponz){ data.push({ code: co.code, coEmail: co.email_restrictions[0], expiry: co.date_expires }); this.coupon = data; console.log(this.coupon) }return data } my data provider: @Injectable() export class SharedDataProvider { public couponz; this.config.Woocommerce.getAsync("coupons/").then((data) => { this.couponz = JSON.parse(data.body); }); my html: <ion-list padding> <ion

After 3 days of scouring stackoverflow and other sites, I have found myself back at square one. My task: I need to validate dynamically generated form fields. The HTML: <form name="myForm"> <form-field content="field" model="output[field.uniqueId]" ng-repeat="field in formFields"></form-field> </form> The controller: var myApp = angular.module('myApp',[]); function MyCtrl($scope) { $scope.formFields = [ { "fieldName": "Your Name", "uniqueId": "your_name_0", "fieldType": "text", "isMandatory": true }, { "fieldName": "Description", "uniqueId": "description_1", "fieldType": "textarea",