ngx-spinner를 사용하여 Angular 애플리케이션에 스피너 추가

NgxSpinner는 50개 이상의 다양한 로딩 스피너가 있는 라이브러리입니다.
Angular 13을 지원하지만 이전 버전에서 사용할 수 있습니다.

일반적으로 우리는 스피너를 사용하여 어떤 일이 발생했음을 보여주고 사용자에게 애플리케이션이 작동하고 있음을 알리기를 원합니다.

API 호출이 진행 중일 때 스피너를 사용합니다.
이 기사에서는 스피너 사용법에 대한 간단한 예제를 보여주고 setTimeout 함수를 사용하겠습니다.
물론 서비스나 인터셉터에 스피너를 추가할 수 있습니다.

설치

사용하기 위해서는 설치가 필요합니다.
ngx-spinner는 npm 또는 yarn을 통해 사용할 수 있습니다.

작업 디렉토리에서 콘솔 열기
npm을 선호하는 경우 다음을 입력하십시오.

$ npm install ngx-spinner --save

원사 유형을 선호하는 경우

$ yarn add ngx-spinner

angular-cli를 사용하여 스피너를 추가하는 옵션도 있습니다.

$ ng add ngx-spinner

수입품

가장 먼저 해야 할 일은 angular.json에 css 애니메이션 파일을 추가하는 것입니다.

{
  "styles": [
    "node_modules/ngx-spinner/animations/ball-beat.css" 
  ]
}

그런 다음 루트 모듈에서 BroswerAnimationModule 및 NgxSpinnerModule을 가져와야 합니다. 일반적으로 이것은 AppModule입니다.

따라서 app.module.ts에 다음을 추가해야 합니다.

import { NgxSpinnerModule } from 'ngx-spinner';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

또한 @angular/core에서 CUSTOM_ELEMENT_SCHEMA를 가져와야 합니다. 그렇지 않으면 콘솔에 오류가 표시됩니다.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

그런 다음 imports 배열 아래에 schemas 배열을 추가하고 거기에 CUSTOM_ELEMENT_SCHEMA를 전달해야 합니다.

이제 app.module.ts는 아래와 같습니다.

@NgModule({
  imports: [
    BrowserAnimationsModule,
    NgxSpinnerModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

사용

서비스에서 제공하는 기능을 사용하기 위해 마지막으로 가져와야 할 것은 ngx-spinner 서비스입니다.
생성자를 통해 서비스를 주입하고 ngOnInit에서 사용합니다.
따라서 app.component.ts는 아래와 같습니다.

import { NgxSpinnerService } from 'ngx-spinner';

class AppComponent implements OnInit {
  constructor(private spinner: NgxSpinnerService) {}

  ngOnInit() {
    this.spinner.show();
    setTimeout(() => {
      this.spinner.hide();
    }, 5000);
  }
}

스피너를 닫는 방법을 보여주기 위해 setTimeout을 사용합니다.
이 경우 스피너는 5초 후에 닫힙니다.

이제 템플릿에서 스피너를 사용할 수 있는 모든 것을 다음과 같이 설정했습니다.

<ngx-spinner type="ball-beat"></ngx-spinner>

읽어주셔서 감사하고 여러분의 의견을 기다리고 있습니다.