Директива ngStyle позволяет задать набор стилей, которые применяются к элементу. В качестве значения директива принимает js-объект, в котором ключи - названия свойств CSS:

import { Component} from '@angular/core';
 
@Component({
    selector: 'my-app',
    template: `<div [ngStyle]="{'font-size':'13px', 'font-family':'Verdana'}">
                    <h1>Hello Angular 11</h1>
                    <p [ngStyle]="{'font-size':'14px', 'font-family':'Segoe Print'}">
                        Angular 11 представляет модульную архитектуру приложения
                    </p>
                </div>`,
    styles: [
        `.verdanaFont{font-size:13px; font-family:Verdana;}
        .segoePrintFont{font-size:14px; font-family:"Segoe Print";}`
    ]
})
export class AppComponent { }

Аналогично для установки стилей можно применять свойства объекта style:

<div [style.fontSize]="'13px'" [style.fontFamily]="'Verdana'">
    <h1>Hello Angular 11</h1>
    <p [style.fontSize]="'14px'" [style.fontFamily]="'Segoe Print'">
        Angular 11 представляет модульную архитектуру приложения
    </p>
</div>

Также мы можем установить привязку

Директивы ngClass и ngStyle позволяют устанавливать привязку к выражениям, благодаря чему мы можем динамически менять стили или классы. Например:

import { Component} from '@angular/core';
 
@Component({
    selector: 'my-app',
    template: `<div [ngClass]="{invisible: visibility}">
                    <h1>Hello Angular 11</h1>
                    <p>
                        Angular 11 представляет модульную архитектуру приложения
                    </p>
                </div>
                <button (click)="toggle()">Toggle</button>`,
    styles: [ `.invisible{display:none;}`]
})
export class AppComponent { 
 
    visibility: boolean = true;
    // переключаем переменную
    toggle(){
        this.visibility=!this.visibility;
    }
}

Выражение [ngClass]=«{invisible: visibility}» устанавливает для класса invisible привязку к значению переменной visibility. По нажатию на кнопку мы можем переключать это свойство, тем самым управляя видимостью блока.

В качестве альтернативы также можно было бы использовать следующее выражение:

<div [class.invisible]="visibility">

Либо также можно было бы написать так:

<div [style.display]="visibility?'block':'none'">