GaramX

사용자 도구

사이트 도구

현재 위치: home » angular » material
추적: • variable • variable_declarations • event-binding • interpolation • angular6 • first • class • regexp • angular
angular:material

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판이전 판
다음 판		이전 판
angular:material [2019/01/20 13:16] – [사용자 theme 정의하기] taekguangular:material [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 1: 줄 1:
 ===== Angular Material ===== ===== Angular Material =====
 +  * [[https://www.angularjswiki.com/angular/angular-material-icons-list-mat-icon-list/|mat-icon List]]
 ==== ng CLI 사용 ==== ==== ng CLI 사용 ====
 [[study:angular|Angular Project]]에 Angular Material을 추가 설치하려면 [[study:angular|Angular Project]]에 Angular Material을 추가 설치하려면
줄 113: 줄 114:
   }   }
 } }
 +</code>
 +
 +overlayContainer에서 class삭제
 +<code javascript>
 +
 +  onThemeChange(_$event) {
 +    // console.log("Here:" + this.theme);
 +    // this.overlayContainer.getContainerElement().classList.remove();
 +    // this.overlayContainer.getContainerElement().classList.add(this.theme);
 +    // if (this.theme === "my-themme") {
 +    //   this.overlayContainer.getContainerElement().classList.remove("my-second-theme");
 +    // } else {
 +    //   this.overlayContainer.getContainerElement().classList.remove("my-theme");
 +    // }
 +    const overlayContainerClasses = this.overlayContainer.getContainerElement().classList;
 +    const themeClassesToRemove = Array.from(overlayContainerClasses).filter((item: string) => item.includes('-theme'));
 +    if (themeClassesToRemove.length) {
 +      overlayContainerClasses.remove(...themeClassesToRemove);
 +    }
 +    overlayContainerClasses.add(this.theme);
 +  }
 </code> </code>
 === Theming only certain components === === Theming only certain components ===
angular/material.1547990180.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)

문서 도구