Angular 5 mat-expansion-panel in another one - Event-Propagation

0
votes

I need to make n mat-expansion-panels in one mat-expansion-panel. So this is no problem so far, but when I try to open a child-panel, the close-event from the parent-panel triggers.

I also have input-fields in the header of the parent. When i click these, or press return, the closing/open-events trigger.

I tried to make a directive, to stop the click-event from bubbling, but this works only if i click on the input field. Even if i put the directive in every single html-element, it triggers/propagates the event

import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[appStopEventPropagation]'
})
export class StopEventPropagationDirective {
  constructor() { }
  @HostListener("click", ["$event"])
  public onClick(event:any):void{
   event.stopPropagation();
  }
}

PARTIALLY SOLVED

I got the return-key-problem solved, via adding a method for keydown-event in the Directive. The problem with the other expansion panels is still there.

Nice picture with my drawings of my View

The HTML is probably kinda big for no reason, but hey, it works ... a bit

Part 1 Template

Part 2 Template

SOLVED

2
angulartypescripteventsangular-materialstoppropagation
could you please share me your template code – Akshath Kumar
I created a stackblitz demo for you, where the panels are nested and opening a child panel does not trigger the parent to close. stackblitz.com/edit/angular-rzjstg May u can recreate your problem in stackblitz – ChrisY
@ChrisY If you post your stackblitz as an answer, i will accept your answer. forgot the arcordion around the inner panels. Thanks – user9479624

2 Answers

2
votes

As described in the comments, the inner mat-accordion was missing. Working example: https://stackblitz.com/edit/angular-rzjstg

0
votes

I have no clue how your template look like. What you can do is:

<mat-panel-description>
  <input placeholder="Type your name and age" (click)="$event.stopPropagation()"/>
</mat-panel-description>