Angular Attribute 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.
Build a simple attribute directive

An attribute directive minimally requires building a controller class annotated with @Directive, which specifies the selector that identifies the attribute. The controller class implements the desired directive behavior.

This page demonstrates building a simple myHighlight attribute directive to set an element’s background color when the user hovers over that element. You can apply it like this:
src/app/app.component.html (applied)

<p myHighlight>Highlight me!</p>

 

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

• Practice Test for Angular4
• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page