Attributes Directives

Attributes Directives

Angular attribute directives are a set of built-in directives that we may use to add dynamic behavior to our HTML components. An attribute directive, in summary, modifies the look or conduct of a DOM element.

The attribute directive modifies a DOM element's look or behavior. These directives appear in templates as ordinary HTML attributes. An attribute directive is a ngModel directive used for two-way communication. The following are some of the other attribute directives.:

  • When you wish to display an element tree with many children, you utilize NgSwitch. Angular only inserts the specified element tree into the DOM if specific requirements are met.
  • NgStyle: NgStyle may set dynamic styles based on the component state. Binding to NgStyle allows you to specify several inline styles at once.
  • NgClass: It dynamically adds and removes CSS classes to manage the look of elements.

The HighlightDirective's test harness will be the AppComponent. Give it a new template that applies the directive to a span element as an attribute. The property host will be assigned to the span> component in Angular.

The template will be placed in its app.component.html file, which will look like this.

h1>Attribute Directive Is My First /h1> /h1> /h1> /h1> /h1> /h1> /h1> /span>Highlight me!