{"id":59808,"date":"2018-05-03T11:20:40","date_gmt":"2018-05-03T05:50:40","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59808"},"modified":"2024-04-12T14:20:47","modified_gmt":"2024-04-12T08:50:47","slug":"angular-attribute-directives","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-attribute-directives\/","title":{"rendered":"Angular Attribute Directives"},"content":{"rendered":"

Angular Attribute Directives<\/h1>\n

There are three kinds of directives in Angular:<\/p>\n

Components\u2014directives with a template.
\nStructural directives\u2014change the DOM layout by adding and removing DOM elements.
\nAttribute directives\u2014change the appearance or behavior of an element, component, or another directive.<\/p>\n

Components are the most common of the three directives. You saw a component for the first time in the QuickStart guide.<\/p>\n

Structural Directives change the structure of the view. Two examples are NgFor and NgIf. Learn about them in the Structural Directives guide.<\/p>\n

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.
\nBuild a simple attribute directive<\/p>\n

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.<\/p>\n

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:
\nsrc\/app\/app.component.html (applied)<\/p>\n

<p myHighlight>Highlight me!<\/p><\/p>\n

 <\/p>\n

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course.<\/strong><\/p>\n

\"\"<\/a><\/p>\n