typescript - Angular 4 (click) ändrar klassen på ett annat element utan att använda jQuery

Jag har en enkel text som är en hyperlänk och när man klickar på den öppnas bara en div med fadeIn-egenskapen. Jag har gjort detta med hjälp av jQuery i mitt angular-cli-projekt. Men jag har förstått att kombinationen av jQuery med Angular inte är att rekommendera.

dashboard.html

<div class="groupMembersPopup" #myname>
    ........ group is selected from list in this div and binding it to selectGroupName var
</div>
<div class="selectPostTo cf">
    <label>Post to</label>
    <a class="selectPostType" (click)="loadPostGroups($event)">{{selectGroupName}}</a>
</div>
<div class="overlayPopup1"></div>

dashboard.ts

@ViewChild('myname') input;
constructor( private _elementRef: ElementRef){}
ngOnInit() {
    let el = this._elementRef.nativeElement;
    let t = 
   this._elementRef.nativeElement.querySelector('groupMembersPopup');
    console.log(t);
  }
loadPostGroups(event) {
    this.startGroup = 0;
    this.endGroup = 100;
    this.group_list = [];
    this.getUserGroups(this.startGroup, this.endGroup);
  }

main.js

if ($(".groupMembersPopup").length) {
      $('.selectPostType').click(function () {
        $('.groupMembersPopup').addClass('show');
        $('.overlayPopup1').fadeIn();
        return false;
      });
      $('.overlayPopup1, .groupMembersPopup .btnRemove').click(function () {
        $('.groupMembersPopup').removeClass('show');
        $('.overlayPopup1').fadeOut();
        return false;
      });
    }

Jag har inkluderat mina main.js-filer i scripts inuti angular-cli.json-filen. Hittills har jag använt jQuery på detta sätt. Hur kan jag omvandla min jQuery-kod till TypeScript? Jag har sökt på det och funnit att ElementRef kan användas. Har försökt, men kunde inte lista ut det.

Svar #1

Använda `ngClass`

För att lägga till/ta bort klasser i Angular rekommenderas det att använda den tillhandahållna templatesyntaxen.

Du kan ha något liknande detta:

Mall

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

Komponent

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

Etiketten kommer att växla mellan css-klasserna show/hide när variabeln shouldShow ändras från true till false

För att få en enkel toning in/ut kan du lägga till denna CSS:

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

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

Använda `ViewChild`

Ett alternativt tillvägagångssätt skulle vara att använda @ViewChild för att få elementreferensen och sedan lägga till/ta bort CSS-klassen manuellt, på detta sätt

Mall:

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

Komponent:

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");
    }
  }
}

Här är en STACKBLITZ med båda sätten att göra det