angular2-directives

How to implement ngModel on custom elements?

by

[(ngModel)]=”item” is a shorthand for [ngModel]=”item” (ngModelChange)=”item = $event” That means that if you want to add a 2-way bind property to your component, for example <app-my-control [(myProp)]=”value”></app-my-control> All you need to do in your component is add @Input() myProp: string; // Output prop name must be Input prop name + ‘Change’ // Use in … Read more

NgFor doesn’t update data with Pipe in Angular2

by

To fully understand the problem and possible solutions, we need to discuss Angular change detection — for pipes and components. Pipe Change Detection Stateless/pure Pipes By default, pipes are stateless/pure. Stateless/pure pipes simply transform input data into output data. They don’t remember anything, so they don’t have any properties – just a transform() method. Angular … Read more

Apply a directive conditionally

by

If you just need to add an attribute in order to trigger CSS rules, you can use the below method: (this does not dynamically create/destroy a directive) <button [attr.md-raised-button]=”condition ? ” : null”></button> Applied the same to your plunker: fork Update: How condition ? ” : null works as the value: When its the empty … Read more

Exception: Can’t bind to ‘ngFor’ since it isn’t a known native property

by

I missed let in front of talk: <div *ngFor=”let talk of talks”> Note that as of beta.17 usage of #… to declare local variables inside of structural directives like NgFor is deprecated. Use let instead. <div *ngFor=”#talk of talks”> now becomes <div *ngFor=”let talk of talks”> Original answer: I missed # in front of talk: … Read more

Angular 2 Scroll to top on Route Change

by

Angular 6.1 and later: Angular 6.1 (released on 2018-07-25) added built-in support to handle this issue, through a feature called “Router Scroll Position Restoration”. As described in the official Angular blog, you just need to enable this in the router configuration like this: RouterModule.forRoot(routes, {scrollPositionRestoration: ‘enabled’}) Furthermore, the blog states “It is expected that this … Read more