CODEWITHSUNDEEP
angularangular-directive
Zelars Green
Zelars Green

Reputation: 13

Directive for changing the color of the card

I have a directive for changing the color of the card

@Directive({
  selector: "[appColor]",
})
export class ColorDirective {
  @Input("color") color: string;
  constructor(private element: ElementRef, private render: Renderer2) {
    this.render.setStyle(this.element.nativeElement, "color", this.color);
    element.nativeElement.style.color = this.color;
  }

  @HostListener("mouseenter") onMouseEnter() {
    this.ChangeColor(this.color);
  }

  @HostListener("mouseleave") onMouseLeave() {
    this.ChangeColor("black");
  }

  ChangeColor(color: string) {
    this.render.setStyle(this.element.nativeElement, "color", color);
  }
}

how do I pass it so that when I hover over the cards, the color of the cards changes depending on their (cards) categories component for displaying cards

          <div *ngIf="todos.length; else noTodos">
            <div routerLink="/todo/{{ todo.id }}" class="card" *ngFor="let todo of todos | filter:searchValue">
              <button class="btn btn-danger" (click)="deleteTodo(todo.id)">X</button>
              <div class="card-body">
                <h3 [class.completed]="todo.completed">{{todo.title | uppercase}}</h3>
                <p [class.completed]="todo.completed">{{todo.description}}</p>
              </div>
              <div>
                <div class="edit-button">
                  <div>Category: {{todo.category}}</div>
                  <div>
                    <button class="btn"><a routerLink="/todo/{{todo.id}}">Edit</a></button>
                    <button class="btn" (click)="completeTodo(todo.id)">Complete</button>
                  </div>
                </div>
              </div>
            </div>

          </div>

Upvotes: 0

Views: 1274

Answers (1)

slashsharp
slashsharp

Reputation: 2833

You can add the directive selector to the html component that you wanted.

Like this

<div appColor color="red"></div>

Here's a complete example using your code.

Upvotes: 1

Related Questions