String Interpolation, NgStyle, NgClass In Angular 7.0

In this article, we will see the creation of an Angular component and we will see how we can use String interpolation, set a background color using ngStyle, and set a foreground color using ngClass based on some condition.

 

In order to work with the above requirement, let us create an Angular component called 'server'. To create a component called server, we need to use ng generate command like below.

 

D:\MyAngularApplication\AngularFirstProject>ng generate component server

 

With the above command, a new component will be created called server component.

 

 

 

The server component comes with four different files like below.

• server.component.css - In this file,m we can write styles or CSS based on our requirement.
• server.component.html - In this file, we can write HTML code.
• server.component.spec.ts - This file is used for testing purpose.
• server.component.ts - This file contains the business logic for binding the code to the HTML which is written in TypeScript.

String Interpolation

In server.component.html, add the below code.

<h3>Server Online Status is: {{onlineStatusReport}} </h3><br>
<h3>Server Offline Status is: {{offlineStatusReport}} </h3>

In server.component.ts, add the below code.

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {

  onlineStatusReport="Online";
  offlineStatusReport="Offline";
  constructor() { }

  ngOnInit() {
  }
}

 

When we execute the above Angular application using ng serve command, the following screen appears.

 

 

 

Open the browser of your choice and navigate to http://localhost:4200 which is provided in the above image. 

 

The output we will get as below.

 

 

Online and Offline values come from server.component.ts. In server.component.ts, we have assigned the value of Online and Offline to onlineStatusReport and offlineStatusReport respectively. With this, when we execute the application, the value of onlineStatusReport and offlineStatusReport will be binding to server.component.html <h3> tag which has onlineStatusReport and offlineStatusReport in double curly braces. With this, we get the output as below.

 

Server Online Status is: Online.

Server Offline Status is: Offline.

 

ngStyle

 

The ngStyle attribute is used to give the styles in runtime based on some condition. If we want to set a particular paragraph or some tag to the background color or foreground color based on some condition, we can do it using ngStyle.

 

Add the following code to server.component.html.

<h3 [ngStyle]="{backgroundColor:getOnlineStatusColor()}">
    Server Online Status is: {{onlineStatusReport}} </h3><br>

<h3 [ngStyle]="{backgroundColor:getOfflineStatusColor()}">
Server Offline Status is: {{offlineStatusReport}} </h3>

 

Similarly, add the below code to server.component.ts.

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {
  onlineStatusReport="Online";

  offlineStatusReport="Offline";
  constructor() { }

  ngOnInit() {
  }

  getOnlineStatusColor(){
    return "green";
  }

  getOfflineStatusColor(){
    return "red";
  }
}

 

From the above image, in server.component.html, we used [ngStyle]="{backgrounColor:getOnlineStatusColor()}" and

[ngStyle]="{backgroundColor:getOfflineStatusColor()}". The first h3 tag will execute and call the getOnlineStatusColor() method which is defined in server.component.ts. It returns the "green" value and sets the value to [ngStyle]="{backgroundColor:green}" and similarly, while executing the second h3 tag, it calls the getOfflineStatusColor() method which is in server.component.ts which returns the value as "red" and it sets the value to [ngStyle]="{backgroundColor:red}" which in turn gets the background color as shown in below output.

 

 

ngClass

 

The ngClass attribute is used to give the CSS styles in runtime based on the condition. If we want to set a particular paragraph or some tag to the background color or foreground color based on some condition, then we can do it using ngClass.

 

Once the ngClass is applied to the particular element, we can see the class attribute added to the elements. Add the below code in server.component.html.

<h3 [ngStyle]="{backgroundColor:getOnlineStatusColor()}"
    [ngClass]="{onOnlineClass:onlineStatusReport==='Online'}">
    Server Online Status is: {{onlineStatusReport}} </h3><br>

<h3 [ngStyle]="{backgroundColor:getOfflineStatusColor()}"
    [ngClass]="{onOfflineClass:offlineStatusReport==='Offline'}">
Server Offline Status is: {{offlineStatusReport}} </h3>

 

Add the below CSS code to server.component.css.

.onOnlineClass{color:white}
.onOfflineClass{color:aqua}

 

Add the below code to server.component.ts.

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css']
})
export class ServerComponent implements OnInit {
  onlineStatusReport="Online";
  offlineStatusReport="Offline";
  constructor() { }

  ngOnInit() {
  }

  getOnlineStatusColor(){
    return "green";
  }

  getOfflineStatusColor(){
    return "red";
  }
}

In the below image, highlighted with red color is the styleUrl which is pointing to the .css file where we will write the .css code. 

 

 

 

 

Thanks. I hope this helps you.