ngx loader indicator

NGXローダーインジケーター

NGXローダーインジケーターは、要素を追加コンポーネントに包むことなくローダーを持つための最良の指令です

また、NGXマスクチェックを試すこともできます。 NGX CopyPasteチェックもお試しください。

例でライブデモを試すことができます。

インストール

$ npm install --save ngx-loader-indicator

NGX-Roader-Indicatorバージョンの場合はQuickStart> = 15.0.0

注意してくださいこのバージョンはAngular> = 14.0.0で動作します

provideEnvironmentNgxLoaderIndicatorを使用してアプリケーション用に構成します

 bootstrapApplication ( AppComponent , {
    providers : [
        provideAnimations ( ) ,
        provideEnvironmentNgxLoaderIndicator ( ) ,
        ( ... )
    ] ,
} ) . catch ( ( err ) => console . error ( err ) ) ;

または、 provideNgxLoaderIndicatorを使用して機能用に構成し、スタンドアロンディレクティブNgxLoaderIndicatorDirectiveをインポートします

@ Component ( {
    selector : 'my-feature' ,
    templateUrl : './my-feature.component.html' ,
    styleUrls : [ './my-feature.component.css' ] ,
    standalone : true ,
    imports : [ NgxLoaderIndicatorDirective , ( ... ) ] ,
    providers : [
        ( ... )
        provideNgxLoaderIndicator ( {
            img : 'https://avatars2.githubusercontent.com/u/32452610?s=200&v=4' ,
            loaderStyles : {
                background : 'rgba(255, 255, 255, 0.8)' ,
            } ,
            imgStyles : {
                width : '50px' ,
                background : 'yellow' ,
            } ,
            rotate : {
                duration : 5000 ,
            } ,
        } ) ,
    ] ,
} )
export class MyFeatureComponent { } 

NGX-Roader-Indicatorバージョン<15.0.0の場合はQuickStart

注意してくださいこのバージョンはAngular <12.0.0で機能します

必要なモジュールでモジュールをインポートします。

 import { NgxLoaderIndicatorModule } from 'ngx-loader-indicator'

( ... )

@ NgModule ( {
  ( ... )
  imports : [
    NgxLoaderIndicatorModule . forRoot ( options )
  ]
  ( ... )
} )

使用法

 < div [ngxLoaderIndicator] =" isLoading " > Content </ div > 

例

 < form (ngSubmit) =" save(form.value) " [formGroup] =" form " [ngxLoaderIndicator] =" isLoading " >
    < h2 > Login </ h2 >
    < input matInput type =" email " placeholder =" Email " #email formControlName =" email " />
    < input matInput type =" password " placeholder =" Password " #name formControlName =" password " />
    < button mat-button [disabled] =" form.invalid " > Login </ button >
</ form > 

オプション

カスタムオプションを定義できます

カスタムIMG（文字列）と色

  {
    img : string ,
    imgStyles : {
      width : string , // '30px'
      background : string , // 'yellow' or rgb(255, 255, 0)
    }
  }

カスタムラッパーレイアウトの色

  {
    loaderStyles : {
      background : string ,
    } ,
  }

画像回転のアニメーションオプション

    rotate: {
      delay ?: number ;
      direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' ;
      duration: number
      easing?: string ;
      endDelay?: number ;
      fill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto' ;
      id?: string ;
      iterationStart?: number ;
      iterations?: number ;
    } ,

使用法

 import { NgxLoaderIndicatorModule } from 'ngx-loader-indicator'

( ... )

@ NgModule ( {
  ( ... )
  imports : [
    NgxLoaderIndicatorModule . forRoot ( {
      img : 'https://avatars2.githubusercontent.com/u/32452610?s=200&v=4' ,
      loaderStyles : {
        background : 'rgba(255, 255, 255, 0.8)' ,
      } ,
      imgStyles : {
        width : '100px' ,
        background : 'yellow' ,
      } ,
      rotate : {
        duration : 5000
      } ,
    } ) ,
  ]
  ( ... )
} )