Style Binding in Angular 17

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:

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:

Style Binding in Angular 17

T

taran910

Improve

Article Tags :

Similar Reads

What is NgClass in Angular 10 ?

In this article, we are going to see what is NgClass in Angular 10 and how to use it. NgClassÂ is used to Add or remove CSS classes on an HTML element Syntax: <element [ngClass] = "typescript_property"> Approach:Â Create the angular app to be usedIn app.component.html make an element and sets i

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

Style Binding in Angular 8

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

What is Angular Material?

User Experience is one of the most important things in web development. Angular Material emerges as a powerful tool for developers, offering numerous UI components designed to elevate your Angular applications to new heights of elegance and functionality. In this article, we'll learn more about Angu

What is CommonModule in Angular 10 ?

In this article, we are going to see what is CommonModule in Angular 10 and how to use it. CommonModule is used to export all the basic Angular directives and pipes. It is re-exported when we import BrowserModule into our angular application, BrowserModule is automatically imported into our applicat

What is Angular Expression ?

Angular is a great, reusable UI (User Interface) library for developers that help in building attractive, and steady web pages and web application. In this article, we will learn about Angular expression. Table of Content Angular ExpressionDifferent Use Cases of Angular ExpressionsSyntaxApproachÂ Ang