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

Question

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.

Can you please post the code where you used ElementRef ?

Abrar
– Abrar

2017-06-19 12:37:37 +00:00
Commented Jun 19, 2017 at 12:37 — Abrar
– Abrar, Commented Jun 19, 2017 at 12:37

Fredrik Lundin Grande · Accepted Answer · 2018-10-09 12:22:03Z

18

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

edited Oct 9, 2018 at 12:22

answered Jun 19, 2017 at 12:41

Fredrik Lundin Grande

8,2561 gold badge32 silver badges36 bronze badges

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

7 Comments

shahakshay94 Over a year ago

What about the fadeIn and fadeOut effect ? I first thought of the above solution only but I needed jQuery fadein and fadeout method that's why I went ahead with jquery , but now it is creating problem for me.!

mast3rd3mon Over a year ago

class="" if statements make changing multiple styles easier and the code looks neater

Fredrik Lundin Grande Over a year ago

@shahakshay94 the fadeIn / fadeOut are jQuery specific animations. You need to re-implement them either using plain css 3 or with angular animations

shahakshay94 Over a year ago

so basically, i am fading in the overlay div. So to be able to do that I made a class in css but again question comes to find the overlay class from the component and apply the class to it. How can I find the element from class inside the template and addClass method to it ?

Fredrik Lundin Grande Over a year ago

@shahakshay94 added an alternative approach

|

Collectives™ on Stack Overflow

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

1 Answer 1

Using `ngClass`

Using `ViewChild`

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Using `ngClass`

Using `ViewChild`

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related