If/Else Conditional Statement in AngularJS 4/5/6

If/Else Conditional Statement in AngularJS 4:

conditional statements are very important in any programming language. Today we are going to see how to use these below conditional statements in angularjs 4. we used ng-template to display the tags/values based on satisfying conditions.

1. If/else
2. If/then
3. If/then/else

Official documentation links for your reference:

NgIf-directive Official Documentation:

NgIf Directive Documentation

NgTemplateOutlet Official Documentation:

NgTemplate Directive Documentation

 

1. Understanding If/else:

app.component.ts:

[html]
export class AppComponent {
title = ‘javadomain’;
}
[/html]
app.component.html:

[html]
<div *ngIf=”title == ‘javadomain’; else check_once”>
Welcome to Javadomain!
</div>

<ng-template #check_once> Why can’t you check javadomain once ?</ng-template>
[/html]

 

 

Output:
[plain]
Welcome to Javadomain!
[/plain]

 

If you change title = ‘javadomain’; to something else like title = ‘google’; then it will print “Why can’t you check javadomain once ?”

 

Things to Note:

• Here attribute title check the value of AppComponent class title value. If it matches then just prints “Welcome to Javadomain!”
• If value/attribute did not match then it prints “Why can’t you check javadomain once ?”

 

 

2. Understanding If/then:

app.component.ts:

[html]
export class AppComponent {
title = ‘javadomain’;
}
[/html]

 

app.component.html:
[html]
<div *ngIf=”title == ‘javadomain’; then thanks”>
Welcome to Javadomain!
</div>

<ng-template #thanks> Thanks for checking javadomain!</ng-template>
[/html]
Output:
[plain]
Thanks for checking javadomain!
[/plain]

 

Things to Note:

Here if title value matches “javadomain” then it prints “Thanks for checking javadomain!” not “Welcome to Javadomain!”, because we mentioned “thanks” attribute after then which is not considering the div text “Welcome to Javadomain!”

 

 

3. Understanding If/else/then

app.component.ts:

[html]
export class AppComponent {
title = ‘ngdeveloper.com’;
}
[/html]

 

app.component.html:
[html]
<div *ngIf=”title == ‘javadomain’; then thanks; else check_once”>
Welcome to Javadomain!
</div>

<ng-template #thanks> Thanks for checking javadomain!</ng-template>
<ng-template #check_once> Why can’t you check javadomain once ?</ng-template>
[/html]
Output:
[plain]
Why can’t you check javadomain once ?
[/plain]

Things to Note:

As the title value in AppComponent given as “ngdeveloper.com”, which renders the else template which is check_once.

 

 

Difference between If and If/then in AngularJS 4:

• If renders the same template/tag values when condition satisfied.

 

[html]

<div *ngIf=”title == ‘javadomain’;”>
Welcome to Javadomain!
</div>

[/html]

Here when condition satisfied it prints Welcome to Javadomain!

 

 

• If/then renders the “then template” values when condition satisfied.

[html]
<div *ngIf=”title == ‘javadomain’; then thanks;”>
Welcome to Javadomain!
</div>

<ng-template #thanks> Thanks for checking javadomain!</ng-template>

[/html]

But here it renders only “Thanks for checking javadomain!”.

 

 

Feel free to write your comments in the below comments section.