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

Question

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

Answer 1

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