# EhcSpinner

Spinner full page and embedded.

Installation

Using npm:

npm install ehc-spinner

Usage

In module:

// Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Modules
import { AppRoutingModule } from './app-routing.module';
import { EhcSpinnerModule } from 'ehc-spinner';

@NgModule({
  declarations: [
    AppComponent,
    SampleDdrJoinPipeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    EhcSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In your ts:

import { Component, OnInit } from '@angular/core';
import { EhcSpinnerService } from 'ehc-spinner';

@Component({
    selector: 'app-ehc-spinner',
    templateUrl: './ehc-spinner.component.html',
    styleUrls: ['./ehc-spinner.component.css']
})
export class EhcSpinnerComponent implements OnInit {

    public embedded: boolean = false;

    constructor(
        private ehcSpinnerService: EhcSpinnerService
    ) { }

    ngOnInit(): void {
    }

    activarSpinner() {
        this.ehcSpinnerService.showSpinner();

        setTimeout(() => {
            this.ehcSpinnerService.hideSpinner();
        }, 5000);
    }

    cambiarModo() {
        this.embedded = !this.embedded;
    }

}

In your html:

<div>
    {{ 'Modo actual: '+ (embedded ? 'Embebido' : 'No esta embebido') }}
</div>
<div>
    <button (click)="activarSpinner()">Activar spinner</button>
    <button (click)="cambiarModo()">Cambiar modo</button>
</div>

<div class="embedded">
    <ehc-spinner *ngIf="embedded" [embedded]="true"></ehc-spinner>
    <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem consectetur ab consequatur ea, possimus at excepturi aperiam, praesentium illum aliquid numquam rerum nam id sequi optio recusandae dolor odit fuga.
    </p>
</div>

<ehc-spinner *ngIf="!embedded"></ehc-spinner>