Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/angular-js/what-is-ngstyle-in-angular-10/ below:

What is NgStyle in Angular 10 ?

Last Updated : 30 Apr, 2021

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:

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

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

  }

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

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

Output:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4