free
web stats

Angular 4 – How to Use If Then Else

Angular 4 – How to Use If Then Else

In this post, I’m going to show you if then as statements. Here app.component.ts and app.component.html file codes;

app.component.ts

app.component.html

We can bind different variables with our template. I have defined a variable isTrue and inside this variable I defined true as a value. Then I binded this variable with app.component.html file, our view page. In here;

<h1 *ngIf = “isTrue”>This is TRUE</h1>

I’m used h1 element and an attribute ngIf with a static. After ngIf I used isTrue variable. If this variable gets true, This is TRUE text will be printed. If this variable gets false, that text wiil not be printed.

It doesn’t need to be boolean value, it can be any conditional thing, like string, number etc…

I’m going to add another condition within ngIf like this;

<h1 *ngIf = “isTrue; else testTemplate”>This is TRUE</h1>

<ng-template #testTemplate>Test Template</ng-template>

Now go to browser, you will see This is TRUE text, because we are sending true value inside there. Let’s change this value with false, now we will see Test Template.

We can send string element and use in template. Now I’m sending name element and control this element in here.

<p *ngIf = “test1 != ‘Necip'”>Yes, This is true</p>

 

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *