ngIf

ngIf is a structural directive in Angular used to conditionally include or exclude a portion of a template from the DOM. It evaluates a boolean expression and, if the result is truthy, renders the associated template; if false, the template is removed from the DOM. This approach differs from simply hiding an element with CSS, because the element and its children are created or destroyed by Angular.

In practice, ngIf is applied to an element in a template using the *ngIf syntax, for example on a section that should appear only when a certain condition is met. Angular also provides optional else and then blocks to specify alternative templates for the false case or to separate the true and false content. The else block references a template defined with an ng-template and a template variable, allowing developers to define what should be shown when the condition is not met. The then and else forms can be combined to designate distinct templates for both outcomes.

ngIf is part of the CommonModule, and you need to import this module (or a module that re-exports it, such as BrowserModule) in your Angular application to use it in templates. It is a core tool for conditional rendering, enabling efficient DOM management by ensuring that only the necessary elements are present when needed. While ngIf handles basic visibility, developers may pair it with other structural directives like ngFor for list rendering or with change-detection strategies to optimize performance.

Historically, ngIf is a feature of Angular (2 and later) and should not be confused with the ng-if directive from AngularJS.