CODEWITHSUNDEEP
angulartypescript
shahakshay94
shahakshay94

Reputation: 145

Angular 4 (click) changes the class of another element without using jQuery

I have a simple text which is a hyperlink and upon clicking, it just opens up a div with fadeIn property. I have done this with the use of jQuery in my angular-cli project. But I have come to understand that jQuery combination with angular is not advisable.

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

I have included my main.js files in scripts inside angular-cli.json file. Uptil now I was using jquery in this manner. How can I transform my jQuery code inside the typescript. I have SO it and found that Elementref can be used. Tried it but couldn't be able to figure it out.

Upvotes: 2

Views: 29463

Answers (1)

Fredrik Lundin Grande
Fredrik Lundin Grande

Reputation: 8186

Using `ngClass`

To add/remove classes in Angular, it's suggested to use the provided template syntax.

You can have something like this:

Template

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

Component

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

The label will toggle between the show/hide css classes as the shouldShow variable changes from true to false

To get a simple fade in/out, you can add this CSS:

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

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

Using `ViewChild`

An alternative approach would be to use @ViewChild to get the element reference and then add/remove the css class manually, like this

Template:

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

Component:

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

Here is a STACKBLITZ with both ways of doing it

Upvotes: 18

Related Questions