Hostbinding ngIf in Angular2

Consider this child component:

@Component({ selector: 'mySelector', template: `<ion-spinner [ngIf]="ngif"></ion-spinner>` }) export class MyDirective { ngif: boolean; constructor() {} @Input() serverWaiting:boolean = true; @HostBinding('ngIf') ngOnChanges() { this.ngif = !this.serverWaiting ? true : null; } 

Host Component Template:

  <mySelector [serverWaiting]></mySelector> 

Host Component:

 @Component({ templateUrl: 'hostComp.html', directives: [myDirective] }) export class HostComp { serverWaiting = true; } 

However, Spinner is not shown. Any idea what I'm doing wrong?

Sources: https://angular.io/docs/ts/latest/api/common/index/NgIf-directive.html

+2
source share
1 answer

The @HostBinding('ngIf') decorator must be in front of the property with the value to be bound.

 export class MyDirective { constructor() {} @HostBinding('ngIf') ngif: boolean; @Input() serverWaiting:boolean = true; ngOnChanges() { this.ngif = !this.serverWaiting ? true : null; } } 

This code does not look valid

 <mySelector [serverWaiting]></mySelector> 

[serverWaiting] indicates a property binding, but does not bind a value. This does not set true if you expect it. You will need

 <mySelector [serverWaiting]="true"></mySelector> 
+5
source

Source: https://habr.com/ru/post/1258679/


All Articles