Обучение работе с привязкой классов и стилей в Angular

Angular представляет собой мощный фреймворк для разработки веб-приложений, который предоставляет разработчикам широкий спектр инструментов для создания динамических и интерактивных пользовательских интерфейсов. Одним из ключевых аспектов работы с Angular является эффективное управление стилями и классами элементов, что позволяет создавать адаптивные и визуально привлекательные приложения.

В этой статье будет подробно рассмотрен процесс работы с привязкой классов и стилей в Angular. Читатель познакомится с различными методами и техниками, которые помогут ему освоить этот важный аспект разработки на Angular.

Что такое привязка классов и стилей?

Привязка классов и стилей в Angular — это механизм, позволяющий динамически управлять внешним видом элементов HTML на основе состояния приложения. Это дает возможность разработчикам создавать гибкие и отзывчивые интерфейсы, которые могут адаптироваться к различным условиям и взаимодействиям пользователя.

Основы привязки классов в Angular

Привязка классов в Angular позволяет динамически добавлять или удалять CSS-классы элементов на основе определенных условий. Это особенно полезно при создании интерактивных компонентов, где внешний вид должен меняться в зависимости от состояния приложения или действий пользователя.

Синтаксис привязки классов

В Angular существует несколько способов привязки классов к элементам:

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

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

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

[class.имя-класса]="выражение"

Где «имя-класса» — это название CSS-класса, а «выражение» — это условие, которое определяет, будет ли класс применен. Например:

[class.active]="isActive"

В этом случае класс «active» будет применен к элементу, если переменная isActive имеет значение true.

Привязка к нескольким классам

Для привязки нескольких классов одновременно используется атрибут [class]:

[class]="выражение"

Где «выражение» может быть строкой, массивом или объектом. Например:

[class]="'class1 class2'" // строка [class]="['class1', 'class2']" // массив [class]="{'class1': true, 'class2': false}" // объект

Использование NgClass директивы

Директива NgClass предоставляет более гибкий способ управления классами:

[ngClass]="выражение"

Где «выражение» может быть строкой, массивом, объектом или методом, возвращающим один из этих типов. Например:

[ngClass]="{'class1': condition1, 'class2': condition2}"

Практические примеры привязки классов

Рассмотрим несколько практических примеров использования привязки классов в Angular:

Пример 1: Изменение стиля кнопки

<button [class.active]="isButtonActive" (click)="toggleButton()"> Нажми меня </button>

В компоненте:

export class ButtonComponent { isButtonActive = false; toggleButton() { this.isButtonActive = !this.isButtonActive; } }

В этом примере класс «active» будет добавляться и удаляться при каждом клике на кнопку.

Пример 2: Управление несколькими классами

<div [ngClass]="{'highlight': isHighlighted, 'bold': isBold, 'italic': isItalic}"> Текст с динамическими стилями </div>

В компоненте:

export class TextComponent { isHighlighted = false; isBold = true; isItalic = false; toggleStyles() { this.isHighlighted = !this.isHighlighted; this.isBold = !this.isBold; this.isItalic = !this.isItalic; } }

Здесь мы можем управлять несколькими классами одновременно, изменяя значения соответствующих свойств.

Основы привязки стилей в Angular

Привязка стилей в Angular позволяет динамически изменять inline-стили элементов. Это может быть полезно, когда требуется более тонкий контроль над стилями, чем тот, который обеспечивается классами CSS.

Синтаксис привязки стилей

Существует несколько способов привязки стилей в Angular:

• Привязка отдельного стиля
• Привязка нескольких стилей
• Использование NgStyle директивы

Привязка отдельного стиля

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

[style.свойство-стиля]="выражение"

Например:

[style.color]="textColor"

Здесь цвет текста будет установлен в значение переменной textColor.

Привязка нескольких стилей

Для привязки нескольких стилей одновременно используется атрибут [style]:

[style]="выражение"

Где «выражение» может быть строкой или объектом. Например:

[style]="'color: red; font-size: 20px;'" // строка [style]="{'color': 'red', 'font-size': '20px'}" // объект

Использование NgStyle директивы

Директива NgStyle предоставляет более гибкий способ управления стилями:

[ngStyle]="выражение"

Где «выражение» обычно является объектом. Например:

[ngStyle]="{'color': textColor, 'font-size': fontSize + 'px'}"

Практические примеры привязки стилей

Рассмотрим несколько практических примеров использования привязки стилей в Angular:

Пример 1: Изменение цвета текста

<p [style.color]="textColor">Этот текст меняет цвет</p>

В компоненте:

export class ColorComponent { textColor = 'blue'; changeColor() { this.textColor = this.textColor === 'blue' ? 'red' : 'blue'; } }

В этом примере цвет текста будет меняться между синим и красным при вызове метода changeColor().

Пример 2: Управление несколькими стилями

<div [ngStyle]="{'background-color': bgColor, 'font-size': fontSize + 'px', 'padding': padding + 'px'}"> Блок с динамическими стилями </div>

В компоненте:

export class StylesComponent { bgColor = 'lightblue'; fontSize = 16; padding = 10; updateStyles() { this.bgColor = this.getRandomColor(); this.fontSize += 2; this.padding += 5; } getRandomColor() { return '#' + Math.floor(Math.random()*16777215).toString(16); } }

Здесь мы можем управлять несколькими стилями одновременно, изменяя значения соответствующих свойств.

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

После освоения основ привязки классов и стилей в Angular, разработчик может перейти к более сложным техникам, которые позволяют создавать более динамичные и отзывчивые интерфейсы.

Условная привязка классов и стилей

Условная привязка позволяет применять классы или стили на основе определенных условий. Это особенно полезно при создании интерактивных компонентов.

Пример условной привязки класса

<div [class.error]="hasError" [class.warning]="!hasError && hasWarning"> Сообщение о состоянии </div>

В этом примере класс «error» будет применен, если hasError истинно, а класс «warning» — если hasError ложно, но hasWarning истинно.

Пример условной привязки стиля

<p [style.color]="isImportant ? 'red' : 'black'"> Важное сообщение </p>

Здесь цвет текста будет красным, если isImportant истинно, и черным в противном случае.

Динамическая привязка на основе данных

Часто требуется привязывать классы или стили на основе динамических данных, получаемых из сервера или пользовательского ввода.

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

<ul> <li *ngFor="let item of items" [class]="item.status"> {{item.name}} </li> </ul>

В этом примере каждый элемент списка получает класс, соответствующий его статусу.

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

<div *ngFor="let user of users" [style.background-color]="user.color"> {{user.name}} </div>

Здесь цвет фона каждого блока устанавливается в соответствии с данными пользователя.

Использование функций для определения классов и стилей

Иногда логика определения классов или стилей может быть слишком сложной для инлайн-выражений. В таких случаях можно использовать функции компонента.

Пример использования функции для определения класса

<div [ngClass]="getClasses(item)"> {{item.name}} </div>

В компоненте:

export class ComplexClassComponent { getClasses(item) { return { 'active': item.isActive, 'disabled': item.isDisabled, 'highlight': item.score > 90 }; } }

Пример использования функции для определения стиля

<div [ngStyle]="getStyles(item)"> {{item.name}} </div>

В компоненте:

export class ComplexStyleComponent { getStyles(item) { return { 'color': item.isImportant ? 'red' : 'black', 'font-weight': item.isHeader ? 'bold' : 'normal', 'font-size': item.level * 2 + 'px' }; } }

Оптимизация производительности при работе с привязкой классов и стилей

При работе с привязкой классов и стилей в Angular важно учитывать производительность, особенно в больших приложениях или при работе со списками, содержащими много элементов.

Использование чистых пайпов

Чистые пайпы могут значительно улучшить производительность при работе с привязкой классов и стилей, особенно когда логика определения классов или стилей достаточно сложна.

Пример использования чистого пайпа для определения классов

@Pipe({ name: 'classMap', pure: true }) export class ClassMapPipe implements PipeTransform { transform(item: any): any { return { 'active': item.isActive, 'disabled': item.isDisabled, 'highlight': item.score > 90 }; } } 

Использование в шаблоне:

<div [ngClass]="item | classMap"> {{item.name}} </div>

Минимизация вычислений в шаблоне

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

Пример оптимизации

Вместо:

<div [style.width]="getComplexWidth(item) + 'px'"> {{item.name}} </div>

Лучше использовать:

<div [style.width]="item.calculatedWidth + 'px'"> {{item.name}} </div>

И выполнять сложные вычисления в компоненте или сервисе.

Использование OnPush стратегии обнаружения изменений

Для компонентов, которые не часто обновляются, можно использовать OnPush стратегию обнаружения изменений, что может значительно улучшить производительность.

@Component({ selector: 'app-item', template: ` <div [ngClass]="classes"> {{item.name}} </div> `, changeDetection: ChangeDetectionStrategy.OnPush }) export class ItemComponent implements OnInit { @Input() item: any; classes: any; ngOnInit() { this.classes = { 'active': this.item.isActive, 'disabled': this.item.isDisabled, 'highlight': this.item.score > 90 }; } }

Работа с анимациями в контексте привязки классов и стилей

Angular предоставляет мощный модуль анимаций, который можно эффективно использовать в сочетании с привязкой классов и стилей для создания динамичных и интерактивных пользовательских интерфейсов.

Основы анимаций в Angular

Анимации в Angular определяются с помощью метаданных @Component, используя свойство animations. Они могут быть привязаны к изменениям состояния, которые часто управляются через привязку классов и стилей.

Пример простой анимации

@Component({ selector: 'app-animated-box', template: ` <div [@boxState]="state" (click)="toggleState()"> Нажми меня </div> `, animations: [ trigger('boxState', [ state('inactive', style({ backgroundColor: '#eee', transform: 'scale(1)' })), state('active', style({ backgroundColor: '#cfd8dc', transform: 'scale(1.1)' })), transition('inactive => active', animate('100ms ease-in')), transition('active => inactive', animate('100ms ease-out')) ]) ] }) export class AnimatedBoxComponent { state: string = 'inactive'; toggleState() { this.state = this.state === 'active' ? 'inactive' : 'active'; } }

Комбинирование анимаций с привязкой классов и стилей

Анимации можно эффективно комбинировать с привязкой классов и стилей для создания более сложных визуальных эффектов.

Пример комбинированного использования

<div [@boxState]="state" [class.highlighted]="isHighlighted" [style.border-color]="borderColor"> Анимированный и стилизованный блок </div>

В этом примере элемент анимируется с помощью триггера boxState, получает класс highlighted на основе условия и имеет динамический цвет границы.

Тестирование привязки классов и стилей

Тестирование является важной частью разработки, и привязка классов и стилей не является исключением. Angular предоставляет инструменты для эффективного тестирования компонентов, включая проверку правильности применения классов и стилей.

Модульные тесты для привязки классов

При написании модульных тестов для компонентов с привязкой классов важно проверять, правильно ли применяются классы в различных условиях.

Пример теста для привязки класса

describe('ButtonComponent', () => { let component: ButtonComponent; let fixture: ComponentFixture<ButtonComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ ButtonComponent ] }).compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(ButtonComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should apply active class when isActive is true', () => { component.isActive = true; fixture.detectChanges(); const buttonElement = fixture.nativeElement.querySelector('button'); expect(buttonElement.classList.contains('active')).toBeTruthy(); }); it('should not apply active class when isActive is false', () => { component.isActive = false; fixture.detectChanges(); const buttonElement = fixture.nativeElement.querySelector('button'); expect(buttonElement.classList.contains('active')).toBeFalsy(); }); }); 

Тестирование привязки стилей

Тестирование привязки стилей включает проверку правильности применения inline-стилей к элементам.

Пример теста для привязки стиля

describe('TextComponent', () => { let component: TextComponent; let fixture: ComponentFixture<TextComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ TextComponent ] }).compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(TextComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should apply correct color style', () => { component.textColor = 'red'; fixture.detectChanges(); const textElement = fixture.nativeElement.querySelector('p'); expect(textElement.style.color).toBe('red'); }); it('should apply correct font size', () => { component.fontSize = 20; fixture.detectChanges(); const textElement = fixture.nativeElement.querySelector('p'); expect(textElement.style.fontSize).toBe('20px'); }); }); 

Лучшие практики работы с привязкой классов и стилей

При работе с привязкой классов и стилей в Angular важно следовать определенным лучшим практикам, чтобы обеспечить чистоту кода, его поддерживаемость и эффективность.

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

Одним из ключевых принципов Angular является разделение логики и представления. Это относится и к работе с классами и стилями.

Рекомендация:

• Сложная логика определения классов и стилей должна находиться в компоненте или сервисе, а не в шаблоне.
• Используйте геттеры в компоненте для простых вычислений, которые можно использовать в шаблоне.

Пример:

// В компоненте get classObject() { return { 'active': this.isActive, 'disabled': this.isDisabled, 'highlight': this.score > 90 }; } // В шаблоне <div [ngClass]="classObject">Content</div> 

Использование CSS-переменных

CSS-переменные (пользовательские свойства) могут быть эффективно использованы в сочетании с привязкой стилей для создания более гибких и легко настраиваемых стилей.

Пример:

// В стилях компонента :host { --primary-color: #007bff; --secondary-color: #6c757d; } // В шаблоне <div [style.color]="isPrimary ? 'var(--primary-color)' : 'var(--secondary-color)'"> Текст с динамическим цветом </div> 

Использование @HostBinding

Декоратор @HostBinding позволяет привязывать свойства к хост-элементу компонента, что может быть полезно для управления классами и стилями на уровне компонента.

Пример:

@Component({ selector: 'app-card', template: `<ng-content></ng-content>` }) export class CardComponent { @HostBinding('class.card-active') isActive = false; @HostBinding('style.border-color') borderColor = 'black'; toggleActive() { this.isActive = !this.isActive; this.borderColor = this.isActive ? 'blue' : 'black'; } } 

Интеграция с CSS-фреймворками

Angular хорошо интегрируется с различными CSS-фреймворками, такими как Bootstrap, Material Design или Tailwind CSS. Правильное использование привязки классов и стилей может значительно упростить работу с этими фреймворками.

Работа с Bootstrap в Angular

Bootstrap — популярный CSS-фреймворк, который часто используется в проектах на Angular. Привязка классов позволяет динамически применять классы Bootstrap.

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

<button [ngClass]="{'btn': true, 'btn-primary': isPrimary, 'btn-secondary': !isPrimary}"> Кнопка Bootstrap </button> 

Интеграция с Angular Material

Angular Material — это библиотека компонентов пользовательского интерфейса, разработанная специально для Angular. Она предоставляет собственные директивы для стилизации, которые можно комбинировать с привязкой классов и стилей.

Пример использования Angular Material с привязкой стилей:

<mat-card [style.background-color]="cardColor"> <mat-card-title>Заголовок карточки</mat-card-title> <mat-card-content>Содержимое карточки</mat-card-content> </mat-card> 

Использование Tailwind CSS в Angular

Tailwind CSS — это утилитарный CSS-фреймворк, который отлично работает с Angular. Привязка классов позволяет динамически применять классы Tailwind.

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

<div [ngClass]="{'bg-blue-500': isBlue, 'bg-red-500': !isBlue, 'p-4': true, 'rounded': isRounded}"> Блок с динамическими стилями Tailwind </div> 

Продвинутые сценарии использования привязки классов и стилей

Рассмотрим несколько продвинутых сценариев, где привязка классов и стилей может быть особенно полезна.

Создание адаптивных компонентов

Привязка классов и стилей может быть использована для создания компонентов, которые адаптируются к различным размерам экрана или ориентации устройства.

Пример адаптивного компонента:

@Component({ selector: 'app-adaptive-card', template: ` <div [ngClass]="cardClasses"> <h2>{{title}}</h2> <p>{{content}}</p> </div> ` }) export class AdaptiveCardComponent implements OnInit { @Input() title: string; @Input() content: string; cardClasses: any; constructor(private breakpointObserver: BreakpointObserver) {} ngOnInit() { this.breakpointObserver.observe([ Breakpoints.HandsetPortrait, Breakpoints.TabletPortrait ]).subscribe(result => { this.cardClasses = { 'card': true, 'card-small': result.matches, 'card-large': !result.matches }; }); } } 

Динамическое создание тем

Привязка стилей может быть использована для создания динамических тем, которые пользователи могут переключать в реальном времени.

Пример компонента с динамической темой:

@Component({ selector: 'app-themed-component', template: ` <div [ngStyle]="currentTheme"> <h2>{{title}}</h2> <p>{{content}}</p> <button (click)="toggleTheme()">Переключить тему</button> </div> ` }) export class ThemedComponent { @Input() title: string; @Input() content: string; lightTheme = { 'background-color': '#ffffff', 'color': '#000000' }; darkTheme = { 'background-color': '#333333', 'color': '#ffffff' }; currentTheme = this.lightTheme; toggleTheme() { this.currentTheme = this.currentTheme === this.lightTheme ? this.darkTheme : this.lightTheme; } } 

Создание анимированных переходов состояний

Комбинирование привязки классов и стилей с анимациями Angular позволяет создавать плавные переходы между различными состояниями компонента.

Пример анимированного компонента:

@Component({ selector: 'app-animated-card', template: ` <div [@cardState]="state" [ngClass]="{'card': true, 'expanded': isExpanded}" (click)="toggleExpand()"> <h2>{{title}}</h2> <p *ngIf="isExpanded">{{content}}</p> </div> `, animations: [ trigger('cardState', [ state('collapsed', style({ height: '50px', opacity: 0.5 })), state('expanded', style({ height: '200px', opacity: 1 })), transition('collapsed <=> expanded', animate('300ms ease-out')) ]) ] }) export class AnimatedCardComponent { @Input() title: string; @Input() content: string; isExpanded = false; state = 'collapsed'; toggleExpand() { this.isExpanded = !this.isExpanded; this.state = this.isExpanded ? 'expanded' : 'collapsed'; } } 

Обработка ошибок и отладка привязки классов и стилей

При работе с привязкой классов и стилей могут возникать различные ошибки. Понимание того, как их обрабатывать и отлаживать, является важным навыком для разработчика Angular.

Общие ошибки и их решения

1. Неправильный синтаксис привязки

Ошибка: Использование квадратных скобок для привязки отдельного класса.

<div [class]="isActive ? 'active' : ''"></div>

Решение: Использовать правильный синтаксис привязки класса.

<div [class.active]="isActive"></div>

2. Неопределенные свойства

Ошибка: Использование несуществующего свойства в привязке.

<div [style.color]="textColor"></div>

Решение: Убедиться, что свойство определено в компоненте.

export class MyComponent { textColor: string = 'black'; } 

3. Неправильные типы данных

Ошибка: Использование неправильного типа данных для стиля.

<div [style.font-size]="fontSize"></div>

Решение: Убедиться, что значение имеет правильный тип и единицы измерения.

<div [style.font-size.px]="fontSize"></div>

Инструменты отладки

Angular предоставляет несколько инструментов, которые могут помочь в отладке проблем с привязкой классов и стилей.

1. Angular DevTools

Angular DevTools — это расширение для браузера, которое позволяет исследовать структуру компонентов, их свойства и привязки.

2. Отладчик браузера

Встроенный отладчик браузера позволяет устанавливать точки остановки в коде TypeScript и исследовать значения переменных во время выполнения.

3. Консоль браузера

Использование console.log() в методах компонента может помочь отследить изменения значений, влияющих на привязку классов и стилей.

Советы по отладке

• Используйте строгую типизацию TypeScript для предотвращения ошибок типов.
• Применяйте линтеры и форматтеры кода для обнаружения синтаксических ошибок.
• Разбивайте сложные выражения на более простые для облегчения отладки.
• Используйте временные классы или стили для визуальной проверки работы привязки.

Оптимизация производительности при работе с большими списками

При работе с большими списками, где каждый элемент использует привязку классов или стилей, могут возникнуть проблемы с производительностью. Рассмотрим несколько стратегий оптимизации.

Виртуальная прокрутка

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

Пример использования CDK Virtual Scroll:

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport"> <div *cdkVirtualFor="let item of items" class="example-item"> <div [ngClass]="{'highlighted': item.isHighlighted}"> {{item.name}} </div> </div> </cdk-virtual-scroll-viewport> 

Trackby функция

Использование trackBy функции в ngFor позволяет Angular более эффективно отслеживать изменения в списке и минимизировать количество обновлений DOM.

Пример использования trackBy:

<div *ngFor="let item of items; trackBy: trackByFn"> <div [ngClass]="{'active': item.isActive}">{{item.name}}</div> </div> // В компоненте trackByFn(index, item) { return item.id; // уникальный идентификатор элемента } 

Оптимизация вычислений

Если определение классов или стилей требует сложных вычислений, стоит рассмотреть возможность кэширования результатов или предварительного вычисления.

Пример кэширования результатов:

@Component({ selector: 'app-list-item', template: ` <div [ngClass]="getItemClasses()"> {{item.name}} </div> ` }) export class ListItemComponent implements OnInit { @Input() item: any; private cachedClasses: any; ngOnInit() { this.cachedClasses = this.calculateClasses(); } getItemClasses() { return this.cachedClasses; } private calculateClasses() { // Сложные вычисления классов return { 'active': this.item.isActive, 'highlighted': this.item.score > 90, 'urgent': this.item.priority === 'high' }; } } 

Интеграция с серверным рендерингом

Angular Universal позволяет выполнять серверный рендеринг приложений Angular. При использовании привязки классов и стилей в контексте серверного рендеринга следует учитывать некоторые особенности.

Особенности работы с классами и стилями при серверном рендеринге

При серверном рендеринге важно помнить, что некоторые браузерные API недоступны, поэтому следует избегать использования window, document и других браузерных объектов при определении классов и стилей.

Пример безопасного использования:

import { PLATFORM_ID } from '@angular/core'; import { isPlatformBrowser } from '@angular/common'; @Component({ selector: 'app-server-safe', template: ` <div [ngClass]="{'browser-only': isBrowser}"> Контент </div> ` }) export class ServerSafeComponent { isBrowser: boolean; constructor(@Inject(PLATFORM_ID) platformId: Object) { this.isBrowser = isPlatformBrowser(platformId); } } 

Оптимизация первоначальной загрузки

При использовании серверного рендеринга важно оптимизировать первоначальную загрузку, минимизируя количество динамических стилей и классов.

Советы по оптимизации:

• Используйте статические классы там, где это возможно.
• Минимизируйте использование сложной логики для определения классов при начальном рендеринге.
• Рассмотрите возможность использования CSS-in-JS решений, которые поддерживают серверный рендеринг.

Заключение

Привязка классов и стилей в Angular является мощным инструментом для создания динамичных и отзывчивых пользовательских интерфейсов. В этой статье были рассмотрены основные концепции, продвинутые техники и лучшие практики работы с привязкой классов и стилей.

Ключевые моменты, которые следует помнить:

• Используйте подходящий синтаксис привязки для различных сценариев (отдельные классы, множественные классы, стили).
• Применяйте NgClass и NgStyle директивы для более сложных случаев привязки.
• Оптимизируйте производительность, особенно при работе с большими списками.
• Используйте инструменты отладки и следуйте лучшим практикам для выявления и решения проблем.
• Учитывайте особенности серверного рендеринга при работе с Angular Universal.

Овладение техниками привязки классов и стилей позволит разработчикам создавать более гибкие, производительные и легко поддерживаемые приложения на Angular. Постоянная практика и изучение новых возможностей фреймворка помогут улучшить навыки и эффективность работы с этими важными аспектами разработки пользовательских интерфейсов.

Метод привязки	Синтаксис	Применение
Привязка отдельного класса	[class.имя-класса]=»условие»	Для добавления/удаления одного класса
Привязка нескольких классов	[ngClass]=»выражение»	Для управления несколькими классами
Привязка отдельного стиля	[style.свойство]=»значение»	Для изменения одного стилевого свойства
Привязка нескольких стилей	[ngStyle]=»выражение»	Для управления несколькими стилями

Эта таблица предоставляет краткий обзор основных методов привязки классов и стилей в Angular, что может служить быстрой справкой при работе над проектами.