안녕하세요.
이번에는 Material 의 spinner 사용법에 대해 알아보겠습니다.
공식문서를 확인해봐도 자세히 잘 나와있습니다.
저는 스피너를 적용할 때에는 SDK를 사용하여 구현하는데요.
이유는 딱히 없지만, 컨트롤하기 편해서 그런것 같습니다.
일단 spinner란 것은 로딩화면처럼 뱅글뱅글 돌아가는 것을 뜻하는데요.
이렇게 뱅글뱅글 돌아갑니다.
Angular 프로젝트 생성과 Material install은 skip하고 넘어가도록 하겠습니다.
프로젝트 생성과 Material install을 모르시는 분들은 아래 링크를 먼저 진행해주세요.
https://le-piee.tistory.com/73?category=938531
1. Module Import
App.module.ts 파일에 사용하려는 모듈을 import 해줍니다.
저희는 Spinner를 사용할꺼기에 스피너 모듈을 import 해줍니다.
2. 사용
사용은 그냥 html파일에 저렇게만 써주면 끝입니다.
이렇게 사용하면 기본적인 스피너 사용이 완료가 됩니다.
이제 제가 사용하는 방법을 사용해보겠습니다.
3.TS파일 작성
아래와 같이 작성 후, 필요 상황에 맞게 showSpinner()나 stopSpinner()를 사용해주시면 됩니다.
//Component.ts파일 import
import { Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { MatSpinner } from '@angular/material/progress-spinner';
//constructor설정
export class AppComponent implements OnInit{
public spinnerRef: OverlayRef = this.cdkSpinnerCreate();
constructor(
private overlay: Overlay
){}
//스피너 생성 코드
private cdkSpinnerCreate() {
return this.overlay.create({
hasBackdrop: true,
backdropClass: 'dark-backdrop',
positionStrategy: this.overlay.position()
.global()
.centerHorizontally()
.centerVertically()
});
}
//스피너 시작과 종료 코드
showSpinner() {
this.spinnerRef.attach(new ComponentPortal(MatSpinner));
}
stopSpinner() {
this.spinnerRef.detach();
}
Oninit(){
}
}