AppDividend
Latest Code Tutorials

Angular 8 NgClass Example | NgClass Directive In Angular

0

In this Angular 8 NgClass Example, you will see how to apply CSS classes to the HTML element using the NgClass directive. If you are new to Angular 8, then I have covered Update Angular 8 CLI and Angular 8 CRUD example. If you are working on Angular 7 then, you should see Angular 7 NgClass. The NgClass directive in the Angular Framework allows us to set the CSS class dynamically for a DOM element. 

The NgClass directive behaves exactly as what ngClass used to do in AngularJS.

Angular 8 NgClass Example

Angular NgClass directive allows you to apply CSS classes dynamically based on expression evaluation.

We can use NgClass in Angular using [ngClass] selector, and NgClass offers three simple ways through which we can update the CSS classes in the DOM.

  1. String – The CSS classes listed in the string (space-delimited) are added,
  2. Array – The CSS classes declared as the Array elements are added,
  3. Object – The keys are CSS the classes that get added when theanexpression given in the value evaluates to the true value. If false, then they are removed.

Let’s start an Angular NgClass Tutorial.

Step 1: Install Angular 8 Project

Now, create the new project using the following command.

➜  angular ng new ngclass-example
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE ngclass-example/README.md (1031 bytes)
CREATE ngclass-example/.editorconfig (246 bytes)
CREATE ngclass-example/.gitignore (629 bytes)
CREATE ngclass-example/angular.json (3471 bytes)
CREATE ngclass-example/package.json (1288 bytes)
CREATE ngclass-example/tsconfig.json (438 bytes)
CREATE ngclass-example/tslint.json (1985 bytes)
CREATE ngclass-example/browserslist (429 bytes)
CREATE ngclass-example/karma.conf.js (1027 bytes)
CREATE ngclass-example/tsconfig.app.json (210 bytes)
CREATE ngclass-example/tsconfig.spec.json (270 bytes)
CREATE ngclass-example/src/favicon.ico (5430 bytes)
CREATE ngclass-example/src/index.html (301 bytes)
CREATE ngclass-example/src/main.ts (372 bytes)
CREATE ngclass-example/src/polyfills.ts (2838 bytes)
CREATE ngclass-example/src/styles.css (80 bytes)
CREATE ngclass-example/src/test.ts (642 bytes)
CREATE ngclass-example/src/assets/.gitkeep (0 bytes)
CREATE ngclass-example/src/environments/environment.prod.ts (51 bytes)
CREATE ngclass-example/src/environments/environment.ts (662 bytes)
CREATE ngclass-example/src/app/app.module.ts (314 bytes)
CREATE ngclass-example/src/app/app.component.css (0 bytes)
CREATE ngclass-example/src/app/app.component.html (1120 bytes)
CREATE ngclass-example/src/app/app.component.spec.ts (1005 bytes)
CREATE ngclass-example/src/app/app.component.ts (219 bytes)
CREATE ngclass-example/e2e/protractor.conf.js (810 bytes)
CREATE ngclass-example/e2e/tsconfig.json (214 bytes)
CREATE ngclass-example/e2e/src/app.e2e-spec.ts (644 bytes)
CREATE ngclass-example/e2e/src/app.po.ts (251 bytes)

Step 2: Add Bootstrap CSS Framework In Angular 8

Now, go inside the folder and open the folder in Visual Studio Code.

Next, install the Bootstrap 4 CSS Framework using the following command.

➜  ngclass-example git:(master) npm install bootstrap --save
npm WARN bootstrap@4.3.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
npm WARN bootstrap@4.3.1 requires a peer of popper.js@^1.14.7 but none is installed. You must install peer dependencies yourself.

+ bootstrap@4.3.1
added 1 package from 2 contributors and audited 19296 packages in 8.132s
found 0 vulnerabilities

Ignore the warnings.

Now, add the Bootstrap CSS file inside the angular.json file.

"styles": [
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Step 3: Create a Model file

Inside the src >> app folder, create one file called StrangerThings.ts file and add the following code inside it.

export default interface StrangerThings {
  actor: string;
  country: string;
}

Our StrangerThings.ts interface has two properties.

  1. actor which is a type of string.
  2. country which is a type of string.

Now, we will create the data based on the above blueprint.

We can also build a backend API using Node.js, Express, and MongoDB. But, we won’t do that; otherwise, the post will be very long.

Step 4: Create fake Data in Angular

Now, write the following code inside an app.component.ts file.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  ST: StrangerThings[] = [
    {
      actor: 'Millie Bobby Brown',
      country: 'UK'
    },
    {
      actor: 'Finn Wolfhard',
      country: 'Canada'
    },
    {
      actor: 'Gaten Matarazzo',
      country: 'USA'
    },
    {
      actor: 'Noah Schnapp',
      country: 'USA'
    },
    {
      actor: 'Caleb McLauglin',
      country: 'USA'
    }
  ];
}

So, here, based on data, we assign the classes to the HTML page, and to do that, we need to use the NgClass directive.

Step 5: Add NgClass Directive in Angular 8

In the app.component.html file, we need a conditional rendering.

Write the following code inside the app.component.html file.

<!-- app.component.html -->

<div class="container">
  <h4>NgClass Example</h4>
  <div *ngFor="let celeb of ST">
    <p [ngClass]="{
      'text-success':celeb.country === 'USA',
      'text-primary':celeb.country === 'UK',
      'text-danger':celeb.country === 'Canada'
    }">{{ celeb.actor }} ({{ celeb.country }})
    </p>
  </div>
</div>

In the above example, we are mapping an actor’s country to apply the dynamic color classes.

We have declared the NgClass object expression to apply a CSS class.

We have used the Angular ngFor directive here.

If the condition is true, it includes the class name on an HTML element.

If false, then it will discard the class name.

Save a file and start the Angular development server using the following command.

ng serve -o

See the output.

 

Angular 8 NgClass Example

It opens the browser, and now you can see that according to Actor’s country, we can see the different text colors.

Angular 8 Multiple conditions in ngClass

In the above example, we can use multiple conditions.

You can have multiple expressions to add multiple classes in the NgClass.

See the following example snippet.

<section [ngClass]="[menu1 ? 'class1' : '',  menu2 ? 'class1' : '', (something && (menu1 || menu2)) ? 'class2' : '']">

We have used Javascript Object Notation to assign different colors based on different conditions.

There are multiple ways to write the same logic.

As mentioned earlier, you can use object notation or only expression.

However, I think you should not that much logic in HTML. Hard to test and find the issue. You can use a getter function to assign the class.

Conclusion

In this Angular 8 NgClass example, we have understood how does NgClass work in an Angular 8 app.

We have created the basic Angular app and learned to apply the dynamic classes on HTML elements using NgClass object expression.

Finally, Angular 8 NgClass Example | NgClass Directive In Angular Tutorial is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.