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

@landen.nienow 

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

1. Создать класс, который будет являться сердцем вашей директивы. Он должен быть помечен декоратором @Directive.

1
2
3
4
5
6
7
8

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

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

1. Укажите селектор директивы в декораторе @Directive. Это то, что вы будете использовать в HTML, чтобы применить директиву.
2. Регистрируйте вашу директиву в модуле приложения.

1
2
3
4
5
6
7
8

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

@NgModule({
  declarations: [MyDirective],
  exports: [MyDirective]
})
export class MyModule { }

1. Используйте селектор вашей директивы в HTML.

1
2
3

<div appMyDirective>
  This is some content.
</div>

Теперь ваша директива будет работать в вашем приложении.

@landen.nienow 

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

1. Создайте новый файл с расширением .directive.ts (например, my.directive.ts) и определите класс директивы с помощью декоратора @Directive:

1
2
3
4
5
6
7
8

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

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

1. Включите эту директиву в список деклараций модуля, в котором хотите использовать директиву. Добавьте ее в поле declarations модуля:

1
2
3
4
5
6
7

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

@NgModule({
  declarations: [MyDirective]
})
export class MyModule { }

1. Используйте селектор вашей директивы в HTML-разметке для применения директивы к элементу:

1
2
3

<div appMyDirective>
  Это какой-то контент
</div>

Таким образом, создавая класс директивы, регистрируя его в модуле и используя селектор директивы в HTML, вы можете создать и использовать директиву в Angular.