Menu
Can I use ngIf without an extra container element?
<tr *ngFor="...">
<div *ngIf="...">
...
</div>
<div *ngIf="!...">
...
</div>
</tr>
It doesn't work in a table because that would make invalid HTML.
369
Angular's ngIf directive does not simply hide and show. It creates and destroys an HTML element based on the result of a JavaScript expression.
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
We can use multiple conditions in *ngIf with logical operator AND (&&) to decide the trustworthy of *ngIf expression. If all conditions are true, then element will be added to the DOM.
Angular expands this into a more explicit version, in which the anchor element is contained in an <ng-template> element. The *ngIf directive is most commonly used to conditionally show an inline template, as seen in the following example. The default else template is blank.
ng-container is preferred over template:
<ng-container *ngIf="expression">
See:
Angular 2 ng-container
https://github.com/angular/angular.io/issues/2303
227
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
