How to add or remove css classes using custom directive in angular 4?

Question

I am using custom directive and I want to modify classes of a host element upon clicking. Everyone is suggesting to use HostBinding and I tried it but still not working.

  @HostBinding('class') nosorting = 'table-sorting';
  @HostBinding('class') ascending = 'table-sorting_asc';
  @HostBinding('class') descending = 'table-sorting_desc';

  @HostListener('click', ['$event'])
  onClick(event) {
    if (event.target.nodeName === 'TH') {
      console.log(this.el);
      const target = $(event.target);
      if (target.data('sort')) {
        if (target.hasClass('table-sorting')) {
          this.renderer.addClass(this.el.nativeElement, 'table-sorting_asc');
          this.renderer.removeClass(this.el.nativeElement, 'table-sorting');
        }
        if (target.hasClass('table-sorting_asc')) {
          this.renderer.addClass(this.el.nativeElement, 'table-sorting_desc');
          this.renderer.removeClass(this.el.nativeElement, 'table-sorting_asc');
        }
        if (target.hasClass('table-sorting_desc')) {
          this.renderer.addClass(this.el.nativeElement, 'table-sorting');
          this.renderer.removeClass(this.el.nativeElement, 'table-sorting_desc');
        }
      }
    }
  }

Can someone in detail tell me how they work and how to use?

This documentation gives you required information

Aravind
– Aravind

2017-11-22 07:32:26 +00:00
Commented Nov 22, 2017 at 7:32 — Aravind
– Aravind, Commented Nov 22, 2017 at 7:32

Ray Luxembourg · Accepted Answer · 2017-11-22 10:18:48Z

1

@HostBinding('class.classsName') varName:boolean;

all you to do is set the boolean true or false and then the class will be active in the dom.

answered Nov 22, 2017 at 10:18

Ray Luxembourg

19610 bronze badges

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

Collectives™ on Stack Overflow

How to add or remove css classes using custom directive in angular 4?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related