Angular Material 버튼에 로딩 상태 지시어(Directive)를 활용한 효율적인 UI 구현

핵심 기술: Angular Material UI 라이브러리의 버튼 컴포넌트에 로딩 상태를 시각적으로 표시하기 위한 커스텀 Angular Directive를 개발하는 방법을 소개합니다.

기술적 세부사항:
* 문제점: Angular Material 버튼의 기본 로딩 상태 지원 부족으로 사용자 경험이 저하될 수 있습니다.
* 해결책: button[matButton][loading] 셀렉터를 가진 ButtonLoading이라는 이름의 Angular Directive를 생성합니다.
* 핵심 로직: Directive는 input으로 loading 값을 받아 effect를 통해 로딩 상태 변경을 감지합니다.
* 스피너 구현: MatProgressSpinner 컴포넌트를 ViewContainerRef를 사용하여 동적으로 생성하고, Renderer2를 이용해 버튼 DOM에 추가합니다. MatButton의 nativeElement를 접근하여 스피너를 적절한 위치에 배치합니다.
* 스타일링: 로딩 중일 때 버튼 텍스트를 숨기고 스피너를 중앙에 배치하기 위해 mdc-button-loading 클래스를 추가하고 관련 CSS를 적용합니다.
* 상태 관리: 로딩 중에는 버튼을 비활성화(disabled = true)하고, 로딩이 끝나면 외부에서 제공된 disabled 값으로 버튼 상태를 복원합니다.

개발 임팩트: 이 Directive를 통해 개발자는 재사용 가능한 컴포넌트로 버튼의 로딩 상태를 깔끔하고 효율적으로 관리할 수 있으며, 이는 사용자 인터페이스의 일관성과 반응성을 향상시킵니다.

커뮤니티 반응: (해당 없음)

톤앤매너: 실무 개발자를 위한 상세한 코드 예제와 함께 단계별 설명을 제공하는 전문적인 톤입니다.