Check a value in *ngIf which is passed from component

Mnv Madhva 0
Viewed 34

I am passing a value from component like this

<component1 [height]="900"></component1>

of course value declared in .ts file as

@Input() height:number=0;

binding to div like this

<div style="height:{{height }}px;" ></div>

I will use this in another component like this

<component1 [height]="300"></component1>

Now, I'm having trouble using the *ngIf condition to determine whether the div height is bigger than zero.

<div style="height:{{height }}px;" *ngIf___________ ></div>

How any suggestions.

If I check the value *ngIf="{{height}}>0" the Angular application will crash.

angular-ng-if data-binding components angular
1 Answers

I can tell that one of your problems is the syntax. You have to delete curly braces on the *ngIf statement:

<div *ngIf="height > 0"></div>

EDIT: You will have to properly bind value to component as well. To bind a variable to a component you will have to do the following :

<component1 [height]="900"></component1>

Also, you can checkout angular directives for css style and class binding

JakaRanga0
Related