How to add a CSS class when in the click event in angular 7 without using ng-Class or ng-Style?

Question

How to add or remove CSS classes to HTML elements when I click on them in Angular7? I want to achieve this without using Ng-Style and Ng-Class directives.

Thanks in advance.

Mukyuu · Accepted Answer · 2019-01-25 07:18:22Z

1

I think it's something like this what you want to achieve (to add and remove a Class on click):

clicked(event) {
let oldClass = event.target.getAttribute('class');
if (oldClass == null) {
  oldClass = '';
  this.render.setElementAttribute(event.target, "class", oldClass + 'selected');
} else if (oldClass.includes('selected')) {
  oldClass = oldClass.replace('selected', '')
  this.render.setElementAttribute(event.target, "class", oldClass);
} else {
  this.render.setElementAttribute(event.target, "class", oldClass + ' selected');
}

Don't forget to import { Renderer } from '@angular/core'; and add constructor(private render: Renderer) { }

See the Stackblitz Demo

More info about Renderer and .replace() or .replace()

edited Jan 25, 2019 at 7:18

answered Jan 25, 2019 at 6:57

Mukyuu

6,7998 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derviş Kayımbaşıoğlu · Accepted Answer · 2019-01-25 07:02:45Z

0

import { Directive, HostBinding} from '@angular/core';

@Directive({
  selector: '[myDirective]',
})
export class MyDirective {

  @HostBinding('class')
  elementClass = 'custom-theme';

  constructor() {
  }
}

then just use it like

<div myDirective> </div>

For directly using inside component

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


@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent  {

  constructor(private renderer: Renderer) {}

  click(event) {
    renderer.addClass(event.target, 'popup');
  }
}

edited Jan 25, 2019 at 7:02

answered Jan 25, 2019 at 6:42

Derviş Kayımbaşıoğlu

30.9k4 gold badges55 silver badges79 bronze badges

1 Comment

Mohammed Marjan Over a year ago

Thanks. But I want to call a function in the '(click)' event and add the classes via that function? (maybe using ElementRef)

Collectives™ on Stack Overflow

How to add a CSS class when in the click event in angular 7 without using ng-Class or ng-Style?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related