Angular 4+ Loading Spinner Component – ngx-loading

In this post we will show you Angular 4+ Loading Spinner Component – ngx-loading, hear for Angular 4 Loading Spinner Component – ngx-loading we will give you demo and example for implement.

Hear is Git hub like for Download, Demo and for information(Read More), it will help you into development and implement for Angular 4+ Loading Spinner Component – ngx-loading. This link of git will give you document, instruction, installation and other information.

Read More Demo Download

Establishment for Angular 4+ Loading Spinner Component

Introduce ngx-stacking by means of NPM, utilizing the order beneath for Angular 4+ Loading Spinner.

// npm install for Angular 4+ Loading Spinner
npm install --save ngx-loading

Beginning

Import the LoadingModule in your root application module:

// for Angular 4+ Loading Spinner Component
// import BrowserModule
import { BrowserModule } from '@angular/platform-browser';
// import NgModule
import { NgModule } from '@angular/core';
// import CoreModule
import { CoreModule } from './core/core.module';
// import LoadingModule
import { LoadingModule } from 'ngx-loading';

@NgModule({
  //......
  imports: [
    //......
    LoadingModule
  ],
  //......
})
// AppModule export
export class AppModule { }

send out class AppModule { }

You should make a boolean (e.g. stacking beneath) that is open from the part which will contain ngx-stacking. This boolean is utilized as a contribution to ngx-stacking, and will decide when the stacking spinner is unmistakable.

 
// for Angular 4+ Loading Spinner Component
// import Component
import { Component, OnInit } from '@angular/core';

@Component({
    //...
})
// export AppComponent
export class AppComponent implements OnInit {
    //...
    public loading = false;

    constructor(private authService: AuthService) { }

    ngOnInit() { }

    Login() {
        this.loading = true;
        this.authService.login(this.email, this.password)
            .subscribe(res => {
                this.loading = false;
                //......
            }, err => {
                this.loading = false;
                //.......
            });
    }
}

Next Angular 4+ Loading Spinner, include the ngx-stacking part selector to your application segment’s format. Set the [show] input variable of ngx-stacking to indicate your boolean, which will decide when ngx-stacking is obvious. Alternatively set the [config] input variable of ngx-stacking to setup custom design choices. In the event that the [config] input variable is not set, the all around arranged setup will be utilized, if set. In the event that no config alternatives are set, the ngx-stacking default config choices will be utilized. See – Config choices for additional data.

NOTE: ngx-stacking will fill the whole of its parent segment. On the off chance that you wish for ngx-stacking to just fill a particular component inside your segment, guarantee that ngx-stacking is a kid component of that component, and that the containing component has its position ascribe set to relative for Angular 4+ Loading Spinner.

<div class="my-container">
    <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '15px' }"></ngx-loading>
    //...
</div>

YOU ALSO LIKE RELATED POSTS

See this Url
http://www.onlinecode.org/angular-4-features-angular-v4/ :: http://www.onlinecode.org/angular-4-features-angular-v4/
http://www.onlinecode.org/angular-min-max-validators-example-angular2/ :: http://www.onlinecode.org/angular-min-max-validators-example-angular2/
http://www.onlinecode.org/angularjs-crop-image-example-demo/ :: http://www.onlinecode.org/angularjs-crop-image-example-demo/
http://www.onlinecode.org/angular-4-notify-popup-component/ :: http://www.onlinecode.org/angular-4-notify-popup-component/
http://www.onlinecode.org/angular-4-dropdown-component-example/ :: http://www.onlinecode.org/angular-4-dropdown-component-example/

Hope this code and post will helped you for implement Angular 4+ Loading Spinner Component – ngx-loading. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org