Angular Highlight Directive

Простая в использовании директива для Angular, которая добавляет эффект подсветки текста при наведении курсора мыши.

Установка

npm install angular-highlight-directive

Использование

1) Импортируйте HighlightDirective в ваш компонент или модуль:

import { HighlightDirective } from 'angular-highlight-directive';

@Component({
  // ...
  imports: [HighlightDirective],
  // ...
})
export class YourComponent { }

2) Используйте директиву в вашем шаблоне:

<p libHighlight>Этот текст будет подсвечен при наведении курсора.</p>

3) Вы можете настроить цвета подсветки:

<p libHighlight="#00FF00" [defaultColor]="'#000000'">
  Этот текст будет подсвечен зеленым цветом при наведении курсора.
</p>

API

@Input() defaultColor: string - цвет текста по умолчанию (по умолчанию '#000000')

@Input('libHighlight') highlightColor: string - цвет подсветки при наведении курсора (по умолчанию '#FF0000')

Пример

import { Component } from '@angular/core';
import { HighlightDirective } from 'angular-highlight-directive';

@Component({
  selector: 'app-root',
  template: `
    <h1>Пример использования Highlight Directive</h1>
    <p libHighlight>Этот текст будет подсвечен красным при наведении курсора.</p>
    <p libHighlight="#00FF00" [defaultColor]="'#0000FF'">
      Этот текст будет синим по умолчанию и зеленым при наведении курсора.
    </p>
  `,
  imports: [HighlightDirective],
  standalone: true
})
export class AppComponent { }