Angular JS Data inbuilt Directives NgStyle and NgClass

In this Example we see inbuilt angularjs Directives

NgStyle
NgClass

NgClass and NgStyle

Lets go through basics first

NgClass

This directive is used when you want to select class of element on certain conditions

The syntax is:

<h3 [ngClass]="{'myclass': flag}"> Change Class</h3>

NgStyle

This directive is getting used to apply multiple styles at a same time as array from variable or it can be also used to change style base on conditions

The syntax is:

 <h3 [ngStyle]="{'color': flag  ? 'red':'green' }">Change Style</h3>

Create your AngularJs Application

Please follow steps mentioned in below post

Hello World with Angular JS

Prerequisites Angularj JS new version is using nodejs for setting up application and for running applicaion you will also need any code editor tool. For current setup we are using visual code studio Kindly down load latest version of nodejs and visual code studio on your machine and complete setup Node Installation 1 Go to…

by lazzygeek 26th Jul 20203rd Aug 2021

Create Components

In this example we have created multiple component which can be refereed in git repo

https://github.com/letsblogcontent/AngularJS/tree/master/AngularJSInBuiltDirectives/src/app

Use below command to generate these components

ng generate component <componentname>

For demonstrating this we have created below component in git project

ng generate component NgclassandngstyleComponent

Please refer:

https://github.com/letsblogcontent/AngularJS/tree/master/AngularJSInBuiltDirectives/src/app/ngclassandngstyle

Lets look at code of this one

ngclassandngstyle.component.ts

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

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

  constructor() { }
  flag = false;

  ngOnInit() {
  }

  changeClass() {
    this.flag = true;
  }

}

We have declared variable which is boolean and initial value is false and it will get changed when use clicks on button from UI and flag will become true

ngclassandngstyle.component.html

<p>ngclassandngstyle works!</p>

<h3 [ngClass]="{'blue-text text-darken-2': flag}"> Change Class</h3>
<h3 [ngStyle]="{'color': flag  ? 'red':'green' }">Change Style</h3>
<button (click) ="changeClass()"> Change Class</button>

In this code we are dynamically applying class and style to h1 element base on “flag” declared in component above. Initially its false so no class will be applied but style color will be green for false value.

Once use click button and “changeClass()” function will called value of flag will be true and class will get applied as “blue-text text-darken-2′” and style color will be red.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TwowaybindingwithNGModelComponent } from './twowaybindingwith-ngmodel/twowaybindingwith-ngmodel.component';
import { FormsModule } from '@angular/forms';
import { NgclassandngstyleComponent } from './ngclassandngstyle/ngclassandngstyle.component';

@NgModule({
  declarations: [
    AppComponent,
    TwowaybindingwithNGModelComponent,
    NgclassandngstyleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add Materialize css in index.html

In Index.html we will add materialize css and js file to use elegant UI

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularJSTwoWayDataBanding</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
       
</head>
<body>
  <app-root></app-root>
</body>
</html>

We have added js file and css file specific to materilize css

https://materializecss.com/

Edit app.component.ts : This is parent component

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'AngularJSInBuiltDirectives';

}

Edit app.component.html

We have added ngmodel component in app.component.html

We have added all components mentioned above in tutorial .You can remove or add as per you need.

app.component.html

<app-ng-if-ng-for-ng-switch></app-ng-if-ng-for-ng-switch>

<div>
    <div class="card-panel   yellow lighten-3">
        <app-ngclassandngstyle></app-ngclassandngstyle>
    </div>
    <div class="card-panel    lighten-3">
        <app-twowaybindingwith-ngmodel></app-twowaybindingwith-ngmodel>

    </div>

</div>

Run Application

If you clone entire project then first run npm install so all dependencies will get downloaded.

Then run below command

ng serve --open

You will get below kind of output for your project once it get compiled and it will open your application in browser

Check Outpput

go to http://localhost:4200 path in browser

In main html we have imbedded all three components.

Lets see output of this

Now click button and check for class and style

After clicking on button it changes style and color of text

We have combined all above mentioned examples on single page in app.component.html and it will look like below on browser so you can play with all 3 components