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

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

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

app.component.css

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

h1 {
  color: green;
}

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

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

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

:host селектор — це єдиний шлях застосувати стилі для нашого кастомного тега в CSS файлі, що йому належить, адже ми не можемо досягти елемента з середини компонента за допомогою інших селекторів, оскільки він не є частиною власного шаблону компонента.

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

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

app.component.html

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

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

• Приклад 1

app.component.html

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

app.component.ts

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

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

• Приклад 2

app.component.html

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

app.component.ts

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() {
  }
}