What is NgStyle in Angular 10 ?

In this article, we are going to see what is NgStyle in Angular 10 and how to use it.

NgStyle is used to add some style to an HTML element

Syntax:

<element [ngStyle] = "typescript_property">

Approach: 

• Create the Angular app to be used
• In app.component.html make an element and sets its class using ngStyle directive
• Serve the angular app using ng serve to see the output

Example 1:

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {

  }

app.component.html

<div [ngStyle] ="{'background-color':'green'}">
  GeeksforGeeks
</div>

<div [ngStyle] ="{'color':'GREEN'}">
  GeeksforGeeks
</div>

Output:

My Personal Notes arrow_drop_up

Save