Add Class to an Element in Angular 4

Add class to an element in Angular 4

Use [ngClass] and conditionally apply class based on the id.

In your HTML file:

<li>
    <img [ngClass]="{'this-is-a-class': id === 1 }" id="1"  
         src="../../assets/images/1.jpg" (click)="addClass(id=1)"/>
</li>
<li>
    <img [ngClass]="{'this-is-a-class': id === 2 }" id="2"  
         src="../../assets/images/2.png" (click)="addClass(id=2)"/>
</li>

In your TypeScript file:

addClass(id: any) {
    this.id = id;
}

Changing class of element in Angular 4

You can use ngClass directive:

<a class="nav-link" [ngClass]="{'active' : condition}" href="#">

How to add class in section after clicking on menu in Angular 4

You can use Angular [class.className]="condition" syntax.

It has been a good practice (at least for myself) to create a model or an interface for the languages in my system. This way you have a full typescript functionality and working with languages gets a lot easier.

I'd go for interface, if you have no need for dynamic changes in your object, especially, if you don't need any custom getters and setters.

// interfaces/Language.ts

export interface Language {
    id: number;
    name: string;
}

In your component you'd then have an array of Languages (or you can use a service, which also makes more sense to me).

@Component({/* ... */})
export class SomeComponent {

    languages: Language[];
    activeLanguage: Language;

    constructor() {
        this.languages = [
            { id: 1, name: 'English' },
            { id: 2, name: 'Hindi'   },
            { id: 3, name: 'Telugu'  },
        ];
        // You can also create a default logic for setting activeLanguage
        // e.g.: set the active language based on data from some service
        // or just set the default language (English for example)
        this.activeLanguage = this.languages[0];
    }
}

This way enables you to make your template for language selection easier, shorter and more readable. As following:

<ul *ngIf="languages.length">
    <li *ngFor="let language of languages" 
        (click)="activeLanguage = language"
        [class.active]="activeLanguage === language">
        {{ language.name }}
    </li>
</ul>

In case you want to show all the section, but add active class to the activeLanguage's section only, here's what you can do:

<div class="lang" [class.active]="activeLanguage.id === 1">Show English Section</div>
<div class="lang" [class.active]="activeLanguage.id === 2">Show Hindi Section</div>
<div class="lang" [class.active]="activeLanguage.id === 3">Show Telugu Section</div>

In case you want to show only the activeLanguage's section, you don't need to worry much about the classes, because only the selected language's section will be showed.

<div *ngIf="activeLanguage.id === 1" class="lang active">Show English Section</div>
<div *ngIf="activeLanguage.id === 2" class="lang active">Show Hindi Section</div>
<div *ngIf="activeLanguage.id === 3" class="lang active">Show Telugu Section</div>

Note that in this example the active class is not needed as only section that will display is the active section.

Also, keep in mind, that if there is any way to create a content for the sections dynamically, you can loop through the languages once again, which will, once again, result in shorter and easier syntax like the following:

<div *ngFor="let language of languages"
     class="lang"
     [class.active]="activeLanguage === language">
    <!-- Build content somehow -->
</div> 

Hope I cleared that out a little.

Angular 4 (click) changes the class of another element without using jQuery

Using `ngClass`

To add/remove classes in Angular, it's suggested to use the provided template syntax.

You can have something like this:

Template

<button (click)="shouldShow = !shouldShow"> Show/Hide </button>
<label [ngClass]="{show: shouldShow, hide: !shouldShow}"> ... </label>

Component

// Make sure to add the variable in the component
public shouldShow = true;

The label will toggle between the show/hide css classes as the shouldShow variable changes from true to false

To get a simple fade in/out, you can add this CSS:

.show {
   opacity: 1;
   transition: opacity 1s;
}

.hide {
   opacity: 0;
   transition: opacity 1s;
}

Using `ViewChild`

An alternative approach would be to use @ViewChild to get the element reference and then add/remove the css class manually, like this

Template:

<button (click)="showOrHideManually()"> Show/Hide manually </button>
<label #myLabel> SOME TEXT BLABLA </label>

Component:

export class App {
  public shouldShow = true;
  @ViewChild("myLabel") lab;

  showOrHideManually() {
    this.shouldShow = !this.shouldShow;
    if(this.shouldShow) {
      this.lab.nativeElement.classList.add("show");
      this.lab.nativeElement.classList.remove("hide");
    } else {
      this.lab.nativeElement.classList.add("hide");
      this.lab.nativeElement.classList.remove("show");
    }
  }
}

Here is a STACKBLITZ with both ways of doing it

How to add class in nested element when click angular 7

Use exportAs property on the Directive decorator

directive.ts

@Directive({
  selector: '[appDropdown]',
  exportAs:'appDropdown'
})

Then create a template variable and assign the appDropdown instance to the variable and append class using ngClass

component.html

<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" 
  appDropdown #ref="appDropdown">Action</button>
  <div class="dropdown-menu" [ngClass]="{'show':ref.toggle}"  >
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

Example:https://stackblitz.com/edit/angular-ksaqam

How can I add a class to an element on hover?

You can also just use something like:

[ngClass]="color" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)"

Then in the component

color:string = 'red';
  
changeStyle($event){
  this.color = $event.type == 'mouseover' ? 'yellow' : 'red';
}

Plunker

Alternatively, do everything in the markup:

[ngClass]="color" (mouseover)="color='yellow'" (mouseout)="color='red'"

Angular 4- How to add and remove multiple classes with ngClass?

You can have a property like selectedTab which is what i'm guessing id is doing here. Just have all tabs have the unselected/inactive class and apply the active class only if the selectedTab/id is equal to that tabs id, you don't need ngClass if you don't want it you can write [class.active-link]="id === 1" where one is that links id. Set the variable id to your default tab in ngOnInit (or in the constructor or default in the class). If I'm missing something here let me know.

As for your hover issue, How can I add a class to an element on hover?

.ts file:

export class AppComponent {
  selectedTab = 0;

  constructor() {}
  // Function to select a tab.
  selectTab(tabId: number) {
    this.selectedTab = tabId;
  }
}

.html file:

<ul class="nav nav-tabs">
 <li [class.active-link]="selectedTab === 0" (click)="selectTab(0)"><a data-toggle="tab">All Sites</a></li>
 <li [class.active-link]="selectedTab === 1" (click)="selectTab(1)"><a data-toggle="tab">All Sites</a></li>
</ul>

---

Related Topics