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 NgStyle Directive

Angular 8 NgStyle Directive

The ngStyle attribute is used to change and style the multiple properties of Angular. We can change the value, color, and size, etc. of the component. It is a built-in directive, ngStyle, to modify a component or element’s style attribute.

It acts the same as the component attribute bindings. The ngStyle directive specifies the style attribute for the HTML element. The value of the ngStyle quality must be an object, or an expression returning an object.

The object consists of CSS properties and values in key-value pairs.

Syntax:

Example:

Using an object with CSS keys and values;


Welcome

How to apply CSS classes dynamically with ng-Class

In the previous article, we have to seen that how to use ngClass directive to apply a CSS class to the element. It facilitates us to add or remove a CSS dynamically.

Create a class in the component.ts file, which will change the color of the text yellow if the server is online.

component.ts file:

import {Component} from '@angular/core';
@Component(
{selector: 'app-server',
templateUrl: 'server.component.html', 
styles: [`
.Online{
color: yellow;
}`]
}) 
export class ServerComponent {
serverID: number = 10;
serverStatus: string = 'Offline';
constructor () {
this.serverStatus = Math.random() > 0.5 ? 'Online' : 
'Offline';
} 
getServerStatus() {
return this.serverStatus;
}
getColor() {
return this.serverStatus === 'Online' ? 'green' : 'red'; 
}
} 

Component.html file:

  Server  with ID {{serverID}} is {{serverStatus}}.

Output:



ADVERTISEMENT
ADVERTISEMENT