String Interpolation, NgStyle, NgClass In Angular 7.0

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

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.
 
String Interpolation, NgStyle, NgClass in Angular 7.0
 
String Interpolation, NgStyle, NgClass in Angular 7.0
 
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.
  1. <h3>Server Online Status is: {{onlineStatusReport}} </h3><br>     
  2. <h3>Server Offline Status is: {{offlineStatusReport}} </h3>    
In server.component.ts, add the below code.
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-server',  
  5.   templateUrl: './server.component.html',  
  6.   styleUrls: ['./server.component.css']  
  7. })  
  8. export class ServerComponent implements OnInit {  
  9.   
  10.   onlineStatusReport="Online";  
  11.   offlineStatusReport="Offline";  
  12.   constructor() { }  
  13.   
  14.   ngOnInit() {  
  15.   }  
  16. }  
String Interpolation, NgStyle, NgClass in Angular 7.0
 
When we execute the above Angular application using ng serve command, the following screen appears.
 
String Interpolation, NgStyle, NgClass in Angular 7.0
 
String Interpolation, NgStyle, NgClass in Angular 7.0
 
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.
 
String Interpolation, NgStyle, NgClass in Angular 7.0
 
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.
  1. <h3 [ngStyle]="{backgroundColor:getOnlineStatusColor()}">  
  2.     Server Online Status is: {{onlineStatusReport}} </h3><br>  
  3.   
  4. <h3 [ngStyle]="{backgroundColor:getOfflineStatusColor()}">  
  5. Server Offline Status is: {{offlineStatusReport}} </h3>   
String Interpolation, NgStyle, NgClass in Angular 7.0
 
Similarly, add the below code to server.component.ts.
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-server',  
  5.   templateUrl: './server.component.html',  
  6.   styleUrls: ['./server.component.css']  
  7. })  
  8. export class ServerComponent implements OnInit {  
  9.   onlineStatusReport="Online";  
  10.   
  11.   offlineStatusReport="Offline";  
  12.   constructor() { }  
  13.   
  14.   ngOnInit() {  
  15.   }  
  16.   
  17.   getOnlineStatusColor(){  
  18.     return "green";  
  19.   }  
  20.   
  21.   getOfflineStatusColor(){  
  22.     return "red";  
  23.   }  
  24. }  
String Interpolation, NgStyle, NgClass in Angular 7.0
 
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.
 
String Interpolation, NgStyle, NgClass in Angular 7.0
 
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.
  1. <h3 [ngStyle]="{backgroundColor:getOnlineStatusColor()}"  
  2.     [ngClass]="{onOnlineClass:onlineStatusReport==='Online'}">  
  3.     Server Online Status is: {{onlineStatusReport}} </h3><br>  
  4.   
  5. <h3 [ngStyle]="{backgroundColor:getOfflineStatusColor()}"  
  6.     [ngClass]="{onOfflineClass:offlineStatusReport==='Offline'}">  
  7. Server Offline Status is: {{offlineStatusReport}} </h3>   
String Interpolation, NgStyle, NgClass in Angular 7.0
 
Add the below CSS code to server.component.css.
  1. .onOnlineClass{color:white}     
  2. .onOfflineClass{color:aqua}     
String Interpolation, NgStyle, NgClass in Angular 7.0
 
Add the below code to server.component.ts.
  1. import { Component, OnInit } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-server',  
  5.   templateUrl: './server.component.html',  
  6.   styleUrls: ['./server.component.css']  
  7. })  
  8. export class ServerComponent implements OnInit {  
  9.   onlineStatusReport="Online";  
  10.   offlineStatusReport="Offline";  
  11.   constructor() { }  
  12.   
  13.   ngOnInit() {  
  14.   }  
  15.   
  16.   getOnlineStatusColor(){  
  17.     return "green";  
  18.   }  
  19.   
  20.   getOfflineStatusColor(){  
  21.     return "red";  
  22.   }  
  23. }  
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. 
 
String Interpolation, NgStyle, NgClass in Angular 7.0
 
String Interpolation, NgStyle, NgClass in Angular 7.0
 
String Interpolation, NgStyle, NgClass in Angular 7.0
 
Thanks. I hope this helps you.