> For the complete documentation index, see [llms.txt](https://koziuk-s.gitbook.io/angular-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koziuk-s.gitbook.io/angular-starter/angular-attribute-directives.md).

# Створення Attribute Directives

Атрибутивні директиви змінюють поведінку елемента, до якого вони застосовуються. Наприклад, директива **ngClass** дозволяє встановити для елемента клас CSS. При цьому сама директива застосовується до елементу у вигляді атрибуту.

```markup
<p [ngClass]="{'verdana-font': true}">
```

### Створення власних атрибутивних директив.

{% code title="cmd" %}

```
$ ng g directive highlight
```

{% endcode %}

{% code title="highlight.directive.ts" overflow="wrap" lineNumbers="true" %}

```typescript
import { Directive, ElementRef } from '@angular/core';
    
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}
```

{% endcode %}

{% code title="app.module.ts" overflow="wrap" lineNumbers="true" %}

```typescript
// ...

@NgModule({
  // ...
  declarations: [
    // ...
    HighlightDirective
  ]
})
export class AppModule { }
```

{% endcode %}