angular 9 Tutorial - *ngIf structural directive || ng-template #14

Опубликовано: 20 Февраль 2020
на канале: Technical Babaji (Tarique Akhtar)
1,224
19

Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.

As with other directives, you apply a structural directive to a host element. The directive then does whatever it's supposed to do with that host element and its descendants.

Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name as in this example.

No brackets. No parentheses. Just *ngIf set to a string.

You'll learn in this guide that the asterisk (*) is a convenience notation and the string is a microsyntax rather than the usual template expression. Angular desugars this notation into a marked-up ng-template that surrounds the host element and its descendents. Each structural directive does something different with that template.

Three of the common, built-in structural directives—NgIf, NgFor, and NgSwitch...—are described in the Template Syntax guide and seen in samples throughout the Angular documentation. Here's an example of them in a template:

NgIf is the simplest structural directive and the easiest to understand. It takes a boolean expression and makes an entire chunk of the DOM appear or disappear.

The ngIf directive doesn't hide elements with CSS. It adds and removes them physically from the DOM. Confirm that fact using browser developer tools to inspect the DOM.


Смотрите видео angular 9 Tutorial - *ngIf structural directive || ng-template #14 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Technical Babaji (Tarique Akhtar) 20 Февраль 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 1,224 раз и оно понравилось 19 людям.