How do I add a CSS class in Angular 6?

In Angular 6 and later versions, you can dynamically add a CSS class to an element using Angular's `ngClass` directive or by manipulating the `classList` property in your component.

 Method 1: Using `ngClass` directive:

The `ngClass` directive allows you to conditionally apply CSS classes based on expressions. Here's an example:

1. **HTML Template:**
   html
   <!-- your-component.component.html -->
   <div [ngClass]="{'highlight': isHighlighted}">
       <!-- Your component content -->
   </div>
  

2. **Component TypeScript:**
   typescript
   // your-component.component.ts
   import { Component } from '@angular/core';

   @Component({
       selector: 'app-your-component',
       templateUrl: './your-component.component.html',
       styleUrls: ['./your-component.component.css']
   })
   export class YourComponent {
       isHighlighted: boolean = true; // Set this based on your condition
   }


In this example, the `highlight` class will be applied to the `div` element when `isHighlighted` is `true`. You can adjust the condition based on your specific requirements.

 Method 2: Using `classList` property:

1. **HTML Template:**
   html
   <!-- your-component.component.html -->
   <div #myDiv>
       <!-- Your component content -->
   </div>
  

2. **Component TypeScript:**
   typescript
   // your-component.component.ts
   import { Component, ElementRef } from '@angular/core';

   @Component({
       selector: 'app-your-component',
       templateUrl: './your-component.component.html',
       styleUrls: ['./your-component.component.css']
   })
   export class YourComponent {
       constructor(private el: ElementRef) {}

       addHighlightClass() {
           const divElement = this.el.nativeElement.querySelector('#myDiv');
           divElement.classList.add('highlight');
       }
   }
  

   - In this example, we use the `ElementRef` to get a reference to the native DOM element with the ID `myDiv`.
   - The `addHighlightClass` method uses the `classList.add` method to add the `highlight` class to the element.

Remember to replace `'highlight'` with your actual class name, and adjust the logic based on your specific requirements. The `ngClass` approach is more Angular-specific and is often preferred for dynamic class binding.