> 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-components/robota-zi-stilyami.md).

# Робота зі стилями

В Angular аплікаціях, ми використовуємо звичайні css властивості, та стилі. Крім того, Angular, прив'язує стилі до конкретного компонента, таким чином — вони не перетинаються і не конфліктують зі стилями інших компонентів. Тобто стилі записані в компоненті app.component.css будуть застосовані лише до елементів які знаходяться в app.component.html. Але якщо нам потрібно написати глобальні стилі, для всієї аплікації, та мати можливість їх застосовувати в будь-якому компоненті, то такі стилі потрібно писати в файлі ./src/styles.css.

Розглянемо приклад використання CSS стилів в компоненті.

{% code title="app.component.css" overflow="wrap" lineNumbers="true" %}

```css
:host {
  display: block;
  border: 1px solid black;
}

h1 {
  color: green;
}
```

{% endcode %}

Так виглядає результат застосування стилів в браузері.

```css
[_nghost-c1] {
  display: block;
  border: 1px solid black;
}

h1[_ngcontent-c1] {
  color: green;
}
```

{% hint style="info" %}
:**host** селектор — це єдиний шлях застосувати стилі для нашого кастомного тега в CSS файлі, що йому належить, адже ми не можемо досягти елемента з середини компонента за допомогою інших селекторів, оскільки він не є частиною власного шаблону компонента.
{% endhint %}

### Механізм динамічної роботи з css стилями в html документі. Директива **ngStyle.**

Директива **ngStyle** дозволяє задати набір стилів. В якості аргументів, вона приймає js об'єкт, в якому ключі — це назви css властивостей.

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<h1 [ngStyle]="{'font-size': '38px'}">Title page</h1>
```

{% endcode %}

Використання змінних:

* Приклад 1

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<h1 [ngStyle]="{'font-size': someVariable}">Title page</h1>
```

{% endcode %}

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

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  someVariable = '38px';
  
  constructor() {
  }
}
```

{% endcode %}

* Приклад 2

{% code title="app.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<h1 [ngStyle]="objExp">Title page</h1>
```

{% endcode %}

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

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  objExp = {
    'font-size': '38px'
  };
  
  constructor() {
  }
}
```

{% endcode %}