Directives and Pipes in Angular/

...

/

Solution: Pass Values to the Custom Attribute Directive

Solution: Pass Values to the Custom Attribute Directive

Let’s compare the task result with expected result and explanation.

We'll cover the following...

Solution

Here’s a possible implementation of what the solution for this task may look like:

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

@Directive({
  selector: '[appButton]'
})
export class ButtonDirective implements OnChanges {

  @Input('appButton') color!: 'primary' | 'secondary';
  @Input() size: number = 120;

  constructor(private elementRef: ElementRef) {
  }

  ngOnChanges() {
    this.elementRef.nativeElement.style.width = `${this.size}px`;

    if (this.color === 'primary') {
      this.elementRef.nativeElement.style.backgroundColor = 'deepskyblue';
      this.elementRef.nativeElement.style.color = 'white';
    }

    if (this.color === 'secondary') {
      this.elementRef.nativeElement.style.backgroundColor = 'gold';
      this.elementRef.nativeElement.style.color = 'black';
    }
  }
}
The task’s solution

Solution explained

We need to use Input properties in the directive to pass the color mode data ...