Search code examples
angularangular-directive

When is useful to use a custom directive in Angular?

In the angular docs there's an example of how to build a custom directive that hightlights a paragraph (or any HTML element where this directive is applied) on mouseover and removes the highlight on mouseout.

(by setting the background to yellow and null respectively: elementRef.nativeElement.style.background ...)

But I was thinking that this can be achieved with good old pal CSS.

So in the end, I can't find a case when a custom directive would be the unique solution to solve a problem.

Can you please take me out of my ignorance and provide me a case where custom directives are useful? Thanks :)

Solution

  • A directive is helpful when you have a custom behavior that you want to attach to a DOM element or existing component, and that custom behavior does not require any HTML template. The best examples of such directives actually come from the Angular framework itself: ngModel, ngFor, ngIf, are all very helpful directives that can be applied to any element.

    Here is an example of using directives to customize the behavior of the HTML video element.