CODEWITHSUNDEEP
angular-material
Michael
Michael

Reputation: 13616

How can attributes be hidden under specific requirements?

I have this element defined in template:

<mat-accordion class="" [multi]="true" hideToggle>
</mat-accordion>

I need to disable hideToggle attribute in the element above when the page is displayed on the device.

How can attributes be hidden under specific requirements?

Upvotes: 0

Views: 35

Answers (3)

Amith
Amith

Reputation: 768

Under a specific requirment:

Element.removeAttribute("hideToggle");

And add it back when required:

Element.setAttribute("hideToggle");

Upvotes: 0

TotallyNewb
TotallyNewb

Reputation: 4790

This is not an attribute - it's an input value of the component. Meaning you can assign this value from your variable, same as you did with your multi input, e.g.

<mat-accordion class="" [multi]="isMulti" [hideToggle]="isToggleHidden">*

Of course you need to have those defined in your .ts file and have some logic that would change those value.

Here's an example stackblitz.

Upvotes: 1

Drashti Dobariya
Drashti Dobariya

Reputation: 3006

You can use it as input directive.

Create a variable inside component.ts file to indicate whether it should be enabled or disabled.

public hideToggle: boolean = true;

Then in html use it like below:

<mat-accordion [hideToggle]="hideToggle">

Example in Stackblitz

Upvotes: 1

Related Questions