Adding class dynamically from template

Question

I am trying to add a class to an Item depending on whether or not this same class exist in another Item.

In the following code, I used data binding with classList but it didn't work:

<ion-item #firstItem>
   <ion-label>My label</ion-label>
   <ion-input type="text" formControlName="myInput"></ion-input>
</ion-item>
<!-- ....... -->
<ion-item [class.myClass]="firstItem.classList.contains('myClass')">
  <ion-input value="myValue" readonly></ion-input>
</ion-item>

My goal is whenever the firstItem has the class myClass, it will be added automatically to the second item, but all I've got is an undefined classList

Do you have any idea why my previous code isn't working?

Thanks

Martin Parenteau · Accepted Answer · 2019-01-19 05:21:33Z

2

The problem is that the #firstItem variable refers to the ion-item component instance, not to the underlying HTML element. The component class does not have the classList property.

You can access the ion-item HTML element in code with the ViewChild read option, and check if the class is defined for that element in a method:

@ViewChild("firstItem", { read: ElementRef }) firstItemRef: ElementRef;

public firstItemHasClass(className: string): boolean {
  return this.firstItemRef.nativeElement.classList.contains(className);
}

The method is then called in the template:

<ion-item [class.myClass]="firstItemHasClass('myClass')">

See this stackblitz for a demo.

edited Jan 19, 2019 at 5:21

answered Jan 19, 2019 at 5:12

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

Adding class dynamically from template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related