What is Angular Material?

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:

What is Angular Material?

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 the AppModule in Angular ?

In Angular, AppModule plays an important role as the entry point to an Angular application. In this article, we'll learn about what AppModule is, its structure, and its significance in Angular applications. We'll also look at some examples to have a clear understanding. Table of Content What is AppM

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 Angular ?

Angular is an open-source web application framework maintained by Google and a community of developers. It is designed to build dynamic and interactive single-page applications (SPAs) efficiently. With Angular, developers can create robust, scalable, and maintainable web applications. Table of Conte

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

AngularJS ng-style Directive

The ng-style Directive in AngularJS is used to apply custom CSS styles on an HTML element. The expression inside the ng-style directive must be an object. It is supported by all the HTML elements. Syntax: <element ng-style="expression"> Content ... </element>Parameter: expression: It rep

What are angular Material Icons ?

Angular Material is a UI component library which is developed by Google so that Angular developers can develop modern applications in a structured and responsive way. By making use of this library, we can greatly increase the user experience of an end-user thereby gaining popularity for our applicat