typescript myngclass-6.ts

Posted 2021-05-20

@Directive({
  selector: '[myNgClass]'
})
export class MyNgClassDirective {
  @Input() myNgClass = {};
  private differ: KeyValueDiffer<any, any>;

  constructor(private differs: KeyValueDiffers, private host: ElementRef, private renderer: Renderer2) {
    this.differ = this.differs.find(this.myNgClass).create();
  }

  ngOnInit() {
    ...add the initial classes
  }

  ngDoCheck() {

    const changes = this.differ.diff(this.myNgClass);

    if (changes) {
      changes.forEachAddedItem((record: KeyValueChangeRecord<any, any>) => {
        if (record.currentValue === true) {
          this.renderer.addClass(this.host.nativeElement, record.key);
        }
      });

      changes.forEachChangedItem((record: KeyValueChangeRecord<any, any>) => {
        if (record.currentValue === true) {
          this.renderer.addClass(this.host.nativeElement, record.key);
        } else {
          this.renderer.removeClass(this.host.nativeElement, record.key);
        }
      });

      changes.forEachRemovedItem((record: KeyValueChangeRecord<any, any>) => {
        this.renderer.removeClass(this.host.nativeElement, record.key);
      });
    }

  }

}