Directives in Angular

What You’ll Learn 📚

• Understanding the core concepts of Angular directives
• Key terminology and definitions
• Simple to complex examples with explanations
• Common questions and answers
• Troubleshooting tips for common issues

Introduction to Angular Directives

In Angular, directives are classes that add additional behavior to elements in your Angular applications. They are one of the core building blocks of Angular and allow you to manipulate the DOM in a declarative way. Think of directives as special instructions in your HTML that tell Angular how to modify or style elements.

Key Terminology

• Directive: A class that allows you to attach behavior to elements in the DOM.
• Attribute Directive: Changes the appearance or behavior of an element, component, or another directive.
• Structural Directive: Changes the DOM layout by adding or removing elements.
• Component Directive: A directive with a template.

Simple Example: Highlight Directive

ng new angular-directives-tutorial

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

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

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

Hover over me to see the magic!

Progressively Complex Examples

Example 1: Structural Directive – ngIf

This text is conditionally visible.

Example 2: Custom Structural Directive

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  private hasView = false;

  constructor(private templateRef: TemplateRef, private viewContainer: ViewContainerRef) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
}

Example 3: Attribute Directive – Custom Tooltip

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

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective implements OnInit {
  @Input('appTooltip') tooltipTitle: string;
  private tooltip: HTMLElement;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    this.tooltip = this.renderer.createElement('span');
    this.tooltip.innerText = this.tooltipTitle;
    this.renderer.appendChild(this.el.nativeElement, this.tooltip);
    this.renderer.setStyle(this.tooltip, 'visibility', 'hidden');
    this.renderer.setStyle(this.tooltip, 'position', 'absolute');
    this.renderer.setStyle(this.tooltip, 'backgroundColor', 'black');
    this.renderer.setStyle(this.tooltip, 'color', 'white');
    this.renderer.setStyle(this.tooltip, 'padding', '5px');
    this.renderer.setStyle(this.tooltip, 'borderRadius', '5px');

    this.renderer.listen(this.el.nativeElement, 'mouseenter', () => {
      this.renderer.setStyle(this.tooltip, 'visibility', 'visible');
    });
    this.renderer.listen(this.el.nativeElement, 'mouseleave', () => {
      this.renderer.setStyle(this.tooltip, 'visibility', 'hidden');
    });
  }
}

Common Questions and Answers

1. What is the difference between a component and a directive?

   Components are directives with a template. They are used to create UI widgets, while directives are used to add behavior to existing DOM elements.

2. How do I decide when to use a directive?

   Use a directive when you want to modify the behavior or appearance of an existing DOM element without creating a new UI component.

3. Can I use multiple directives on a single element?

   Yes, you can apply multiple directives to a single element. Just make sure they don’t conflict with each other.

4. Why use Renderer2 for DOM manipulation?

   Renderer2 is used for DOM manipulation because it ensures that your code works across different platforms and avoids direct DOM access, which can be problematic in server-side rendering.

5. What are some common mistakes when using directives?

   Common mistakes include forgetting to declare the directive in a module, not using the correct selector, and not handling events properly.

Troubleshooting Common Issues

Issue: Directive not working.

Solution: Ensure the directive is declared in the correct Angular module and that the selector is used correctly in the template.

Issue: Styles not applying.

Solution: Check if the Renderer2 is used correctly and that the styles are applied to the correct element.

Issue: Event listeners not triggering.

Solution: Verify that the @HostListener is set up correctly and that the events are correctly spelled.

Practice Exercises

• Create a directive that changes the text color of an element on click.
• Build a structural directive that shows an element only if a certain condition is met.
• Develop a custom directive that adds a border to an element when it gains focus.

Remember, practice makes perfect! 💪 Keep experimenting with directives, and you’ll master them in no time. If you have any questions, don’t hesitate to ask. Happy coding! 😊