Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Angular 8 ngClass Directive

Angular 8 ngClass Directive

ngClass Directive is a type of attribute directive. Angular provided built-in directive, and it helps in adding or removing CSS classes on an HTML element. The ngClass directive allows us to apply CSS classes dynamically based on expression evaluation.

[ngClass] selector uses the NgClass directive, and ngClass offers three simple ways through which we can update CSS classes in the DOM.

Syntax:

Create an Interface Class and Array

In this step, we have to create an interface class to define the properties types of cars array.

Run the command to create interface class:

ng generate class Cars

Our cars collection has properties name and color, go to src>app>cars.ts and add the below code:

export interface Cars {
name: string;
color: string;
} 

Then, we will generate the cars array in app.component.ts file same as given below:

 Import {Component} from ‘@angular/core’; 
Import {Cars} from ‘./cars’;
@Component({
selector: ‘app-root’,
templateUrl:’./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
cars: Cars[]=[
{
“name”:”MG Hector”,
“color”: ’blue’
},
{
“name”:”Ford”,
“color”: ’olive’
},
{
“name”:”Kia”,
“color”: ’orange’
},
{
“name”:”BMW”,
“color”: ’red’
},
{
“name”:”Jaguar”,
“color”: ’Green’
},
{
“name”:”Suzuki”,
“color”: ’purple’
}
];
} 

Joining NgClass Directive on HTML template

In this last step, we will learn to add the CSS class dynamically to the HTML elements using Angular NgClass directive.

 Example:

Go to app.component.html template and then add the ngClass directive as mentioned below.

{{car.name}]

 In the above example, we are representing cars name to apply the dynamic color class, we declared NgClass object expression to apply the class. If the condition is true, it includes the class name on the HTML element if not, then it will discard the class name.

To see the working demo in our browser, run the given command:

ng serve --open

Output:

Joining NgClass Directive on HTML template



ADVERTISEMENT
ADVERTISEMENT