Mastering the Art of Attribute Directives in Angular
Published: 2023-06-06 23:20:00

## Mastering the Art of Attribute Directives in Angular



Angular is an incredibly powerful front-end framework that allows developers to write complex and dynamic applications. One of the most powerful features of Angular is its ability to use directives. Directives allow developers to extend the functionality of HTML elements, and to create custom elements that can be used throughout an application.



In Angular, there are three types of directives: attribute directives, structural directives, and component directives. In this article, we will focus on attribute directives, which are used to modify the behavior or appearance of an existing HTML element.



### Creating an Attribute Directive



To create an attribute directive in Angular, we need to create a new class that implements the `Directive` decorator.



<pre><code>@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  constructor(private elementRef: ElementRef) {}
}</code></pre>

The `selector` property of the `@Directive` decorator is used to specify the name of the directive. In this example, the name of the directive is `myDirective`, and it is used as an attribute on an HTML element.



The constructor of the directive takes an `ElementRef` parameter, which is used to get a reference to the HTML element that the directive is applied to.



### Modifying the Behavior or Appearance of an Element



Now that we have created our directive, we can use it to modify the behavior or appearance of an HTML element. One common use case for attribute directives is to add or remove CSS classes from an element based on certain conditions.



<pre><code>@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  constructor(private elementRef: ElementRef) {}
  
  @Input() set myClass(condition: boolean) {
    if (condition) {
      this.elementRef.nativeElement.classList.add('my-class');
    } else {
      this.elementRef.nativeElement.classList.remove('my-class');
    }
  }
}</code></pre>

In this example, we have added an input property to our directive called `myClass`, which takes a boolean value. If the value is `true`, the directive adds the `my-class` CSS class to the HTML element. If the value is `false`, the directive removes the `my-class` CSS class from the HTML element.



To use our new directive, we simply add the `myDirective` attribute to any HTML element that we want to modify.



<pre><code>&lt;div myDirective [myClass]="true"&gt;This is my custom directive&lt;/div&gt;</code></pre>

In this example, we have added the `myDirective` attribute to a `&lt;div&gt;` element, and we have set the `myClass` input property to `true`. As a result, the `my-class` CSS class will be added to the `&lt;div&gt;` element.



### Conclusion



Attribute directives are a powerful feature of Angular that allow developers to create custom HTML elements and modify the behavior or appearance of existing elements. By creating an attribute directive and utilizing the `ElementRef` and `@Input` decorators, we can create dynamic and responsive applications that are tailored to the needs of our users.



If you want to learn more about Angular directives, including structural and component directives, be sure to check out the Angular documentation and explore some of the many tutorials and examples available online.