=====ngStyle=====

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

<code javascript>
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 { }
</code>

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

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

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

<code javascript>
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;
    }
}
</code>

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

<code javascript>
<div [class.invisible]="visibility">
</code>
Либо также можно было бы написать так:
<code javascript>
<div [style.display]="visibility?'block':'none'">
</code>