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…
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…
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…
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…
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.
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…
1
2 3