Questions tagged [mat-expansion-panel]
39 questions
7
votes
4 answers
Expand/Collapse functionality between components
I have 2 different components where I am using Angular - Expansion Panel for expandable summary view.
I am able to integrate to individual components successfully.
I need help to make Component2.html as parent of…

Tejas Mehta
- 281
- 1
- 4
- 17
2
votes
1 answer
mat-expansion-panel [expanded] input does not work properly when set asynchronously
I have a mat-accordion which has a mat-expansion-panel set like this:
You can see the "expanded" input is true if "item" has…

Thomas Cafaro
- 53
- 1
- 5
2
votes
1 answer
Angular Material Expansion Panel needs 3 clicks to open after close (Angular >10)
After closing the Angular Material Expansion Panel via a boolean variable,
it closes just fine but to reopen it again you will need to click it 3 times to reopen it.
Apparently in Angular 6 it works just fine with the identical example but i…

NME
- 21
- 4
2
votes
1 answer
Forcing mat-expansion-panel to overflow container element
I have a mat-expansion-panel inside of a mat-card. The expansion panel contains a mat-chip-list which contains anywhere between 50-60 mat-chip elements.
When I expand this panel, all of my mat-card objects are stretched downwards, and the chips show…

pfinferno
- 1,779
- 3
- 34
- 62
1
vote
1 answer
How to load child component only when mat expansion panel is expanded?
I have mat accordion in which I am dynamically creating expansion panels and its content components
I want to render and call api inside custom…

suraj p Yedre
- 11
- 2
1
vote
1 answer
How to align div to mat-expansion-panel-header?
I am stucked with the MatExpansionModule from Angular.
In the mat-expansion-panel-header part, I would like to display an image and a short description.
However, the image and description do not automatically adapt to the…

user111
- 137
- 1
- 15
1
vote
1 answer
mat-panel-description doesn't fit when panel shrinks
I have a mat-panel in my HTML, which description takes a variable from the TS to get filled with. Problem is, then I shrink the panel and the description is too long, the text gets cut on top and bottom. How can I make that, when the panel is…

Lorenzo Bertolaccini
- 43
- 1
- 8
1
vote
0 answers
Unable to add space between words while using Angular mat-expansion panel
I have text field in mat-expansion panel. I am unable to add space when typing a word Dinbert Syndrome. When I click on space down arrow open the panel
Below is the image after typed 1st word (Arrow is intact and downwards)
When pressed space, no…

Tejas Mehta
- 281
- 1
- 4
- 17
1
vote
1 answer
CSS display Angular expansion panel element in one line
I am using Angular in my project.
I am unable to display Frate, Kunda and date and its value on one line.
I have tried using various css properties such as white-space: nowrap; but none of them are working for me
Working Demo -…

DON DAN
- 57
- 1
- 1
- 5
1
vote
1 answer
how to change Angular mat-expansion-panel direction
I'm using angular material component "mat-expansion-panel". the default opening direction for this component is down.
i want the panel to open in different directions (left, right, up)
how can i do that.

mariem_11
- 81
- 2
- 6
1
vote
1 answer
How to automatically focus the editor in the expansion panel content on open of expansion panel in angular?
I have an expansion panel with "Write a response" header. On opening the expansion panel, I'm having a quill editor.
I need to focus the quill editor on expanding the panel.
"Write a…

code
- 11
- 5
0
votes
0 answers
expanded property of Mat Expansion Panel not triggered with back button
I am using Mat Expansion Panel on a list and utilizing the expanded attribute to expand/collapse a row.
The initial state of the URL is https://company.org/link/table. When a row is expanded, I add the ID in the url I.e.…

ericute
- 144
- 1
- 2
- 15
0
votes
0 answers
Material expansion panel scrolling problem on opening when in multiple tabs
I have 2 material accordions in separate tabs. When im going into 2nd tab, which has first expansion panel expanded by default, and trying to open last expansion panel (ACC 8 in my stackblitz example) it doesnt scroll into its content and its…

Bak_w
- 1
0
votes
0 answers
mat-expansion-panel 'closed' event is called with random index instead of 'destroyed'
I am using mat-expansion-panel inside cdk-virtual-scroll.
I want to hit a function when the panel is destroyed after scrolling, but the (closed) event is called instead of the (destroyed) event, having a random index as a parameter.
…

Kaleem Ullah
- 36
- 6
0
votes
0 answers
matSideNav showing its own scroll with virtual scroll
I am using a list of expansion panels inside virtual-scroll using scrollWindow,
it works fine until I put this virtual scroll in matSideNav.
Sidenav…

Kaleem Ullah
- 36
- 6