Angular – Step 7 : Ng- template

Concept – To use if and else within our templates.


<div><ng-template [ngIf]="counter > 4" [ngIfElse]="none"> <p>The click counter <strong>IS GREATER</strong> than 4.</p></ng-template>

<ng-template #none><p>The click counter is <strong>not greater</strong> than 4.</p> </ng-template> </div>

Step 1- Use property binding [ngIf] and bind it to expression counter > 4.

Step 2- If that expression is true, it will show the HTML within the initial ng-template block. 

Step 3– If that expression isn’t true, it will call none with ngIfElse.

Step 4- And it shows the template defined by #none beneath it!  


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.