CODEWITHSUNDEEP
htmlangularangular-material
Woody
Woody

Reputation: 1787

How can I collapse an already expanded expandable row in an angular mat table?

I have been trying to figure out how to collapse an expanded row when I click it on in angular. I have a page which has been written in a similar manner to this:

https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html (this is from the documentation here: https://material.angular.io/components/table/examples )

Basically this allows you to expand a row and have any other rows that are expanded, to collapse. I want to be able to collapse the existing expanded row without expanding any others.

I was trying to mess around with the line:

<div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">

to a nested if, something like:

 <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? element == expandedElement ? 'collapsed' : 'expanded' : 'collapsed'">

which obviously doesn't work. I'm not very well-versed in HTML/Angular/(webby-stuff) so I wasn't sure what to google to find the correct syntax for this. What do you call something like [@detailExpand] ? A class method? A html method? Thanks

Upvotes: 1

Views: 3372

Answers (1)

user184994
user184994

Reputation: 18281

Change the click handler like so:

(click)="expandedElement = expandedElement === element ? null : element"

This will ensure that, if you're clicking on the already expanded element, it will make expandedElement null, so no items become expanded

Here is a fork of the Stackblitz

Upvotes: 3

Related Questions