Angular Interview Questions For 5 Years Of Experience

Angular Interview Questions For Experienced

Source:- Angular Interview Questions For 5 Years Of Experience

If you’re on a free Medium plan, click here to read — Free Access

For more questions and answers visit our website at Frontend Interview Questions

1. What are custom directives in Angular and how to create them ?

Custom directives are a feature in Angular that allow developers to extend the functionality of HTML by creating their own custom HTML elements or attributes. With custom directives, developers can define their own behavior, such as adding event listeners, modifying the DOM, or manipulating data.

To create a custom directive in Angular, follow these steps:

1. Create a new directive using the @Directive decorator. The decorator specifies the selector for the directive and any inputs, outputs, and other options.
2. Define the directive class, which contains the logic for the directive. The class should implement the OnInit and OnDestroy interfaces to handle the initialization and destruction of the directive.
3. Add the directive to the declarations array in the module that will use it. This tells Angular that the directive should be available for use in that module.

Here is an example of a simple custom directive that changes the background color of an element:

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) { }

  ngOnInit() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }

  ngOnDestroy() {
    this.renderer.removeStyle(this.el.nativeElement, 'background-color');
  }
}

In this example, the HighlightDirective sets the background color of an element to yellow when it is initialized, and removes the background color when it is destroyed. The ElementRef and Renderer2 classes are used to access and manipulate the element in the DOM. To use this directive in a template, simply add the appHighlight attribute to an element:

  <p apphighlight>
   This text will have a new yellow background.
  </p>