Angular Structural Directives

Angular Structural Directives

There are three kinds of directives in Angular:

Components—directives with a template.
Structural directives—change the DOM layout by adding and removing DOM elements.
Attribute directives—change the appearance or behavior of an element, component, or another directive.

Components are the most common of the three directives. You saw a component for the first time in the QuickStart guide.

Structural Directives change the structure of the view. Two examples are NgFor and NgIf. Learn about them in the Structural Directives guide.

Attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template Syntax guide, for example, can change several element styles at the same time.

structural directives
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 descendents.

Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name as in this example.
src/app/app.component.html (ngif)

<div *ngIf=”hero” >{{hero.name}}</div>

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

 

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course.

Angular 4 Tutorial IndexBack to Angular 4 Tutorial Main Page

Share this post
[social_warfare]
Angular Attribute Directives
Angular Built-in Directives

Get industry recognized certification – Contact us

keyboard_arrow_up