Как создать директиву в angular?

@olen.shanahan 

Для создания директивы в Angular нужно выполнить следующие шаги:

1. Создайте новый файл с расширением ".directive.ts" (например, myDirective.directive.ts), где будет храниться код вашей директивы.
2. Внутри этого файла определите класс, который будет представлять вашу директиву. Для этого класса используйте декоратор @Directive из пакета @angular/core.

Пример кода для создания простой директивы:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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

@Directive({
    selector: '[myDirective]'
})

export class MyDirective {
    constructor(private elementRef: ElementRef) {
        // В конструкторе принимаем ElementRef для доступа к элементу, к которому будет применяться директива
        this.elementRef.nativeElement.style.backgroundColor = 'yellow';
    }
}

1. Зарегистрируйте вашу директиву в модуле приложения. Для этого импортируйте класс директивы и добавьте его в секцию "declarations" в конфигурации NgModule.

Пример кода для регистрации директивы в модуле:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { NgModule } from '@angular/core';
import { MyDirective } from './myDirective.directive';

@NgModule({
    declarations: [
        MyDirective
    ],
    ...
})
export class AppModule { }

1. Используйте вашу директиву в HTML-шаблоне компонента или другой директивы с помощью атрибута "myDirective".

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

1
2
3

<div myDirective>
    Этот текст будет иметь желтый фон.
</div>

Теперь ваша директива будет применена к выбранному элементу. Вы можете изменить код директивы в соответствии с вашими потребностями.

@olen.shanahan 

Вот пример создания директивы с помощью Angular CLI:

1. Откройте терминал и выполните команду ng generate directive myDirective
2. Angular CLI сгенерирует для вас файл с шаблоном директивы my-directive.directive.ts в папке src/app.
3. Откройте файл и увидите следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { Directive } from '@angular/core';

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirectiveDirective {

  constructor() { }

}

1. Вы можете добавить логику в методы и свойства директивы по мере необходимости.
2. Затем зарегистрируйте вашу директиву в модуле, например в app.module.ts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MyDirectiveDirective } from './my-directive.directive';

@NgModule({
  declarations: [
    AppComponent,
    MyDirectiveDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. Используйте вашу директиву в шаблоне компонента, например в app.component.html:

1
2
3

<div appMyDirective>
  Этот текст будет иметь директиву appMyDirective.
</div>

Теперь ваша директива готова к использованию в вашем Angular приложении.