change class when click in angular 8

Question

I am not able to change class when clicking on the button.

I am using this.

event.srcElement.classList.remove("unsubscribe");
event.srcElement.classList.add("subscribe");

I am passing the event in function when clicking on the button.

<a #subscribe title="unsubscribe" *ngIf="rec?.attributes?.Subscription == 'true'" class='unsubscribe'  (click)="subscribeUnsubscribe($event);$event.stopPropagation();" data-toggle="modal"></a>
<a #subscribe title="subscribe" *ngIf="rec?.attributes?.Subscription == 'false' || rec?.attributes?.Subscription == null || rec?.attributes?.Subscription == 'undefined'" class='subscribe'  (click)="subscribeUnsubscribe($event);$event.stopPropagation();" data-toggle="modal"></a>

The problem is I am having two angular components in one component the srcElement is working fine and toggling the classes, but in another component, it is not working and giving the below error.

ERROR TypeError: Cannot read property 'srcElement' of undefined

@SunnyParekh, no I want to achieve this with srcElement it is working in another component — Jayesh Vyas
– Jayesh Vyas, Commented Jan 24, 2020 at 8:35
@JayeshVyas There is no real reason to use the classList. You have such an amazing framework and you use plain javascript dom? — Leon Marzahn
– Leon Marzahn, Commented Jan 24, 2020 at 8:36

Evaldas Buinauskas · Accepted Answer · 2020-01-24 08:38:57Z

1

I don't know the reason why it gives you an error, but this code is not enough to know really. Have you considered using the NgClass directive? Here a tutorial

You can do something like this:

Component:

public subscribed: boolean;

Template:

<div #someElement [class.subscribe]="!subscribed" [class.unsubscribe]="subscribed"></div>

edited Jan 24, 2020 at 8:38

Evaldas Buinauskas

14.2k11 gold badges63 silver badges119 bronze badges

answered Jan 24, 2020 at 8:35

Leon Marzahn

3494 silver badges15 bronze badges

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

Comments

Sunny Parekh · Accepted Answer · 2020-01-24 08:37:16Z

0

Ok so you can do something like this:

subscribeUnsubscribe(event) {
 event.srcElement.classList.remove("unsubscribe");
    setTimeout(()=>{
      event.srcElement.classList.add("subscribe");
    },0)
}

I hope it helps.

answered Jan 24, 2020 at 8:37

Sunny Parekh

1,0019 silver badges19 bronze badges

2 Comments

Sunny Parekh Over a year ago

Have you used timeout?

Sunny Parekh Over a year ago

Can you create a sample on stackblitz to help us understand your concern?

user12119806 · Accepted Answer · 2020-01-24 09:12:03Z

0

Use ngClass to check all your conditions and return your style class. For example:

<a #subscribe [ngClass]="getstyleClass(rec)" title="unsubscribe" (click)="subscribeUnsubscribe($event);$event.stopPropagation();" data-toggle="modal"></a>

and in your component file

public getstyleClass(rec: any):string {
 if (rec?.attributes?.Subscription === true){
  return "unsubscribe";
 }
 if (rec?.attributes?.Subscription == 'false' || rec?.attributes?.Subscription == null || rec?.attributes?.Subscription == 'undefined') {
  return "subscribe"; 
 }
 return "";
}

answered Jan 24, 2020 at 9:12

user12119806

532 silver badges10 bronze badges

Collectives™ on Stack Overflow

change class when click in angular 8

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related