ngStyle Directive in Angular | Directives | Angular 15+

The ngstyle is an attribute directive. That means, ngStyle changes the look and behaviour of an HTML element.
The ngStyle directive is used to set a CSS style dynamically for an HTML element based on a given typescript expression.

search.component.ts

export class ProductsComponent {
    variableis="red"
}

search.component.html

<div class="col-sm-4" [ngStyle]="{color:variableis=='red'?'red':'green'}">
	Hello world you have red coloor
</div>