Reset Value of Attribute from directive to default when an event is fired in angular 4

Question

Below is a sort directive which I have made for an application where the table header should have first column sort order to be 'asc' by default and other columns should have 'desc' by default so when clicked on them they should start with 'asc' and first column starts with 'desc' when clicked : See below

import { Directive, Input, Output, HostListener, EventEmitter, Renderer2, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[appSort]'
})
export class SortDirective implements OnInit {

  constructor(private renderer: Renderer2, private el: ElementRef) { }

  ngOnInit() {    
    let th = this.el.nativeElement;
    let span = this.renderer.createElement('span');
    this.renderer.appendChild(th, span);    
  }

  @Input() sortToggler: boolean
  @Output() sortOrder = new EventEmitter();
  @HostListener('click') onclick() {
    this.sortToggler = !this.sortToggler;
    if(this.sortToggler == true) { 
      let elems = document.querySelectorAll('.myTable thead tr th');
      let th = this.el.nativeElement;
      let span = th.children[0];

      for(let i = 0; i < elems.length; i++) {
        this.renderer.removeClass(elems[i].children[0], 'fa');
        this.renderer.removeClass(elems[i].children[0], 'fa-caret-up');
        this.renderer.removeClass(elems[i].children[0], 'fa-caret-down');
      }      

      this.renderer.addClass(span, 'fa');
      this.renderer.addClass(span, 'fa-caret-up');
      this.sortOrder.emit('asc');
    } else if(this.sortToggler == false){
      let elems = document.querySelectorAll('.myTable thead tr th');
      let th = this.el.nativeElement;
      let span = th.children[0];

      for(let i = 0; i < elems.length; i++) {
        this.renderer.removeClass(elems[i].children[0], 'fa');
        this.renderer.removeClass(elems[i].children[0], 'fa-caret-up');
        this.renderer.removeClass(elems[i].children[0], 'fa-caret-down');
      }

      this.renderer.addClass(span, 'fa');
      this.renderer.addClass(span, 'fa-caret-down');
      this.sortOrder.emit('desc');
    }
  }
}

Now the Html where this directive is used:

<table class="table table-striped myTable">
      <thead>
        <tr>
          <th scope="col" class="wd-grid-0">
            <input class="" name="roNbr" type="checkbox">
          </th>
          <th appSort [sortToggler]="true" (sortOrder)="getSortOrder($event, 'claimId')">Claim ID <span class="fa fa-caret-up"></span></th>
          <th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'repairOrderNbr')">RO Number</th>
          <th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'chassisNbr')">Chassis Number</th>
          <th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'claimStatusCode')">Claim Status</th>
          <th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'checkStatusCode')">Check Status</th>
          <th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'fieldAuthInd')">FAS</th>
          <th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'claimDate')">Create Date</th>
          <th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'requestedAmount')">Requested</th>
          <th appSort [sortToggler]="false" (sortOrder)="getSortOrder($event, 'locationId')">Loc</th>
          <th appSort class="disableEvent">Notes</th>
          <th appSort class="disableEvent">Delete</th>
        </tr>
      </thead>
    </table>

So suppose I click on any th it works as required it does the 'asc' and 'desc' accordingly. Now the problem is suppose an event is fired on press of a button say SEARCH. I want to reset [sortToggler] values for each th to its default values as defined on loading of table. But this is not happening as for example if I click on RO Number column on first time its value emitted will be 'asc' and then I click on SEARCH and again I click on RO Number column.... as per the requirment I need it to be 'asc' again but it still emits 'desc'. I have tried lot of ways but none of them is working. Check console for values emitted on clicks of columns. Right now search event is empty and ready for the answer. Can Anyone solve this riddler. Thanks in advance.

Here's the working demo. https://angular-smc3hu.stackblitz.io

And one little error here is that font-awesome icons are not displaying.

Answer 1

Find my code @ StackBlitz

You need to re-render the table to reset the @Input() sortToggler: boolean;

As the directive is on individual row and it holds the TRUE/FALSE value for every row in "sortToggler", just by re-setting the "sortToggler" from "reset" button doesn't worked.

So to re-render the TABLE, it needs to destroy in DOM, hence used *nfIf .

"appSort' directive on "Reset" button is optional, you can remove it.

<button (click)="resetValue()" appSort resetBtn]="resetClicked">reset</button>

I hope this will Help!!!