TypeScript 2.x By Example

The *ngIf directive

As the name suggests, *ngIf provides us with an if condition, which can be used to remove or add an element to HTML based on whether the if expression is true or false. If the expression evaluates to true, then we end up adding an element into dom; else if the expression evaluates to false, then we remove the element. The following example shows the usage *ngIf:

<div class='table-responsive'>  <table class='table' *ngIf='articles && articles.length'>     <thead> ...    </thead>    <tbody> ...    </tbody>  </table></div>

Here, in the second line, we used *ngIf to evaluate an expression for the article array. With the if condition, we check if the article array is not null and has some length (size); if so, we show the HTML elements ...