Angular ngStyle Directive with Examples

Angular ngStyle attribute is “used to change or style the multiple properties.” You can change the value, color, size, etc., of the elements. It sets one or more style properties specified as colon-separated key-value pairs. If the evaluation result is null, the corresponding style is removed.

Here is the step-by-step guide to use the ngStyle directive in Angular.

Step 1: Install the Angular project

ng new angulardata

Go inside the folder and open the folder in Visual Studio Code.

Install the Bootstrap 4 CSS Framework using the following command. You can skip installing Bootstrap because we do not need too much styling here.

npm install bootstrap --save

Add the bootstrap CSS file inside the angular.json file.

"styles": [
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Step 2: Create a Model file.

Inside the src >> app folder, create one Character.ts file and add the following code.

// Character.ts

export default class Character {
    actor_name: String;
    character_name: String;
    gender: String;
    status: String;
}

We will display the Game of Thrones characters and their properties like actor_name,character_namegenderstatus, etc.

The next step is to create an array of data inside the app.component.ts file.

// app.component.ts

import { Component } from '@angular/core';
import Character from './Character';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   characters: Character[] = [
    {
       actor_name: 'Peter Dinklage',
       character_name: 'Tyrion Lannister',
       gender: 'Male',
       status: 'Alive'
    },
    {
       actor_name: 'Sean Bean',
       character_name: 'Ned Stark',
       gender: 'Male',
       status: 'Dead'
    },
    {
       actor_name: 'Emilia Clark',
       character_name: 'Khaleesi',
       gender: 'Female',
       status: 'Alive'
    },
    {
       actor_name: 'Catelyn Stark',
       character_name: 'Michelle Fairley',
       gender: 'Female',
       status: 'Dead'
    }
  ];
}

Step 3: Create an HTML view to display data in Angular

Write the following code inside the app.component.html file.

<div class="container">
  <h4>NgStyle</h4>
  <div *ngFor="let celeb of characters">
     <p [ngStyle]="{'background-color':celeb.status === 'Dead' ? 'red' : 'green' }">
	{{ celeb.actor_name }} ({{ celeb.character_name }}) is {{celeb.gender}} character and {{celeb.status}}
     </p>
   </div>
</div>

Save the file and see the output in the browser.

Angular 7 NgStyle Tutorial With Example | Angular NgStyleWe can assign the following type of styling to the HTML elements using the ngStyle directive.

Set the font of the containing element to the result of an expression.

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

Set the containing element’s width to a pixel value returned by an expression.

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

Set a collection of style values using an expression that returns key-value pairs.

<some-element [ngStyle]="objExp">...</some-element>

Add multiple CSS styles in Angular.

The syntax becomes confusing and cluttered when assigning styles to an item. This is why there is a different way of assigning styles in Angular using the ngStyle directive.

Besides the style property, ngStyle takes an object containing the style names and their values.

<div [ngStyle]="{'color': 'purple', margin: '11px', padding: '11px'}">
  Millie Bobby Brown
</div>
Binding to properties in Angular

Binding to properties, we don’t need single quotes for the value.

<div [ngStyle]="{'color': color}">
  Millie Bobby Brown
</div>

Evaluating expressions in Angular

This is how evaluating expressions with ngStyle works.

<div [ngStyle]="{'color': data ? colorP : colorQ}">
  Millie Bobby Brown
</div>

That’s it.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.