[Angular] Material mat menu 유지하고 닫기

이번 포스팅에서 angular material의 mat-menu를 클릭했을 시 패널을 유지하고 특정 버튼을 클릭했을 시 닫히도록 해보겠습니다.

mat-menu에 대한 자세한 내용은 Angular Material 페이지에서 확인할 수 있습니다.

Angular Material

 

기본적으로 mat-menu를 사용하면 메뉴가 나온 다음 메뉴 패널 안을 클릭을 해도 무조건 닫히게 됩니다.

아래의 코드를 mat-menu안에 (click)="$event.stopPropagation()"을 추가를 해주면 클릭시 닫히는 걸 방지할 수 있습니다.

<button 
    mat-icon-button
    [matMenuTriggerFor]="menu"
>
    <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
    <button mat-menu-item (click)="$event.stopPropagation()">메뉴 1</button>
    <button mat-menu-item (click)="$event.stopPropagation()">메뉴 2</button>
    <button mat-menu-item (click)="$event.stopPropagation()">메뉴 3</button>
</mat-menu>

이 상태에서 메뉴 패널 밖을 클릭해도 닫히지만 특정 한 버튼을 클릭했을 때 닫히게 하고 싶은 경우에는 MatMenuTrigger 안에 있는 closeMenu()를 호출해서 닫을 수 있습니다.

먼저 MatMenuTrigger를 template에 추가해줍니다.

<button 
    mat-icon-button
    [matMenuTriggerFor]="menu"
    #menuTrigger="matMenuTrigger"
>
    ...
</mat-menu>

그 다음 component에서 해당 MatMenuTrigger를 이용해서 메뉴창이 닫히도록 해보겠습니다. 아래와 같이 MatMenuTrigger에 있는 closeMenu를 호출해주면 MatMenuTrigger에 연결되어 있는 MatMenu가 닫히게 됩니다.

...

@Component({
    ...
})
class TestComponent implements OnInit {
    @ViewChild('menuTrigger') menuTrigger!: MatMenuTrigger;
    
    ...
    
    closeMenu(): void {
        menuTrigger.closeMenu();
    }
}

 

부족한 글 읽어 주셔서 감사합니다.💛