Angular Route를 활용한 Modal 관리(Manage Modal with Angular Route)

1 · · Dec. 22, 2023, 5:36 a.m.
Angular에서 Modal을 열고 닫는 방법은 다양하게 존재합니다. 그 중에서도 Route를 활용하여 Modal을 제어하는 방법을 살펴보겠습니다. 이 방식은 특정 주소로 이동할 때 Modal이 열리고, 해당 주소에서 벗어나면 Modal이 닫히는 간편하면서도 효과적인 방법입니다. 1. 프로젝트 설정 먼저, Angular 프로젝트에서 Route를 사용할 수 있도록 설정합니다. 만약 모듈 방식으로 작업 중이라면 RouterModule을 import하고, standalone인 경우 provideRouter()를 정의합니다. 이 예제에서는 standalone을 기준으로 작성하였습니다. import { Routes } from '@angular/router'; export const appRoutes: Routes = [ { path: '', children: [ {path: 'modal', loadChildren: () => import('./modal/modal.routes'...