Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Spinner loader com angular 8

Referente ao curso Angular parte 4: lapidando o projeto

por Gedan Magalhães
| 136.2k xp | 52 posts
Desenvolvedor

Pessoal, pesquisei muito e não encontrei nenhum exemplo plausível. Criei um componente de spinner loader onde chamo em diversas telas. Por se tratar de um componente, quero chama-lo de acordo com minhas funções de show() e hide() do serviço. Achei algumas libs que utilizam dessa forma, e por questões de aprendizado, resolvi criar o meu próprio loader. De acordo com as minhas pesquisas, é possível fazer com Subject, mas não consigo achar um exemplo que sirva no meu componente.

Segue o código do componente. HTML:

<div class="row" *ngIf="isActive" class="loader">
  <div class="col s12 {{ direction }}">
    <div class="preloader-wrapper {{ tamanho }} active">
      <div class="spinner-layer spinner-blue">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div>
        <div class="gap-patch">
          <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>

      <div class="spinner-layer spinner-red">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div>
        <div class="gap-patch">
          <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>

      <div class="spinner-layer spinner-yellow">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div>
        <div class="gap-patch">
          <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>

      <div class="spinner-layer spinner-green">
        <div class="circle-clipper left">
          <div class="circle"></div>
        </div>
        <div class="gap-patch">
          <div class="circle"></div>
        </div>
        <div class="circle-clipper right">
          <div class="circle"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Arquivo Ts

@Component({
  selector: 'app-loader-circular',
  templateUrl: './loader-circular.component.html',
  styleUrls: ['./loader-circular.component.scss']
})
export class LoaderCircularComponent implements OnInit {
  isActive: boolean;
  //big; small; empty
  @Input() tamanho: string;
  @Input() direction: string;
  modalLoadCirc = {
    tamanho: '',
    direction: 'center'
  };
  loadCirc = {
    tamanho: 'big',
    direction: 'center'
  };
  constructor(private loaderService: LoaderService) { }
  ngOnInit() {
  }
}

Service:

@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  isActive: boolean;
  show() {
    this.isActive = true;
  }
  hide(){
    this.isActive = false;
  }
}
1 resposta
solução!
por Gedan Magalhães
| 136.2k xp | 52 posts
Desenvolvedor

Resolvido ! Meu Serviço:

import { Observable, Subject, BehaviorSubject } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoaderService {

  private isActive = new Subject<boolean>();
  public loader = this.isActive.asObservable();

  show() {
    this.isActive.next(true);
  }

  hide() {
    this.isActive.next(false);
  }
}

Componente

@Component({
  selector: 'app-loader-circular',
  templateUrl: './loader-circular.component.html',
  styleUrls: ['./loader-circular.component.scss']
})
export class LoaderCircularComponent implements OnInit {
  @Input() tamanho: string;
  @Input() direction: string;
  isActive: boolean;

  modalLoadCirc = {
    tamanho: '',
    direction: 'center'
  };

  loadCirc = {
    tamanho: 'big',
    direction: 'center'
  };

  constructor(private loaderService: LoaderService) { }

  ngOnInit() {
    this.loaderService.loader.subscribe(data => {
      this.isActive = data;
    });
  }
}