What is NgStyle in Angular 10 ?

Style Binding in Angular 8

Last Updated : 14 Sep, 2020

It is very easy to give the CSS styles to HTML elements using style binding in Angular 8. Style binding is used to set a style of a view element. We can set the inline styles of an HTML element using the style binding in angular. You can also add styles conditionally to an element, hence creating a dynamically styled element.

Syntax:

<element [style.style-property] = "'style-value'">

Example 1:

app.component.html:

HTML

<h1 [style.color] = "'green'" 
    [style.text-align] = "'center'" >
  GeeksforGeeks
</h1>

Output:

Example 2: Setting the size of the font using style binding.

app.component.html:

HTML

<div [style.color] = "'green'" 
     [style.text-align] = "'center'" 
     [style.font-size.px]="'24'" >
  GeeksforGeeks
</div>

Output:

Example 3: Conditional styling.

app.component.html:

HTML

<div [style.color]="status=='error' ? 'red': 'green'" 
     [style.text-align] = "'center'" 
     [style.font-size.px]="'24'" >
  GeeksforGeeks
</div>

app.component.ts:

JavaScript

import { Component } from '@angular/core';    
@Component({    
  selector: 'app-root',    
  templateUrl: './app.component.html',    
  styleUrls: ['./app.component.css']    
})    
export class AppComponent {   
  status = "All good";
}

Output:

What is NgStyle in Angular 10 ?

T

taran910

Improve

Article Tags :

Similar Reads

Style Binding in Angular 17

In Angular, creating visually appealing and dynamic user interfaces is important for delivering an engaging user experience. One such powerful feature is Style Binding. It allows you to dynamically apply CSS styles to HTML elements based on component data or expressions. In this article, we'll explo

Class Binding in Angular 8

Class binding in Angular makes it very easy to set the class property of a view element. We can set or remove the CSS class names from an element's class attribute with the help of class binding. We bind a class of a DOM element to a field that is a defined property in our Typescript Code. Its synta

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 usedIn app.component.html make an element and sets its class us

Angular10 animation Style API

In this article, we are going to see what is Style in Angular 10 and how to use it. The Style in Angular10 is used to create a key/value object containing CSS properties/styles that can be used for an animation state. Syntax: Style(tokens) NgModule: Module used by Style is: animations Approach: Crea

Angular PrimeNG Badge Styling

Angular PrimeNG is a collection of Interactive UI components for Angular applications. Developers can use these components to make beautiful and responsive web interfaces in no time as most of the components have all the necessary functions implemented. In this article, we will see the Angular Prime

Angular PrimeNG Dialog Styling

A responsive website may be created with great ease using the open-source Angular PrimeNG framework, which has a wide range of native Angular UI components for superb style. In this article, we will learn how to style the Dialog Styling in Angular PrimeNG.Â The Dialog component is used to create a c