Пользовательская директива для изменения цвета текста

У меня есть компонент, содержащий категории, мне нужно реализовать директиву, с помощью которой при наведении курсора на каждую из их категорий, например, цвет изменился, я навожу курсор на текст "Категория 1", и он меняет цвет на зеленый, "Категория 2" - цвет становится красным и так далее

categories Component.html

<div class="line"></div>
<ul>
    <li><a class="category-link" appColor [color]="red" >Category 1</a></li>
    <li><a class="category-link" appColor [color]="blue">Category 2</a></li>
    <li><a class="category-link" appColor [color]="yellow">Category 3</a></li>
    <li><a class="category-link" appColor [color]="green" >Category 4</a></li>
    <li><a class="category-link" appColor [color]="vilot" >Category 5</a></li>
</ul>

categories Component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-todo-categories',
  templateUrl: './todo-categories.component.html',
  styleUrls: ['./todo-categories.component.scss']
})
export class TodoCategoriesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Color.directive.ts

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

@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);
  }
}

В HTML файле у меня ошибка "Identifier 'blue' is not defined. The component declaration, template variable declarations, and element references do not contain such a memberng"