Entrar Ainda não tem acesso?
2
respostas

Spinner loader no carregamento da página

Referente ao curso Angular 2: webapps ainda mais poderosas parte 1

por alberto.souzafernandes
| 173.5k xp | 50 posts

Possuo o seguinte código no html

   <div [class.spinner-border]="isLoading">
          <span class="sr-only">Carregando...</span>
   </div>

meu componente está da seguinte forma:

isLoading = true;

 loadCustomers() {
    this.cloudService.getCustomersAll()
    .subscribe(customerArray => {
      this.customers = customerArray;
    this.isLoading = false;
    },
    error => {
      alert('error ');
    } );
  }

ngOnInit() {
    this.loadCustomers();
  }

Eu inicio minha variável como true e após o carregamento do loadCustomers eu passo para false, com intuito de iniciar o componente enquanto carrega e depois sumir, porém quando a página está carregando não exibe o spinner e depois que executa o loadCustomer ele passa para false ai não deve exibir mesmo.

Alguma idéia para esse caso?

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
2 respostas
por Gabriel Leite
| 3486k xp | 5398 posts
Instrutor

Boa tarde, Alberto! Como vai?

Apenas o que me ocorreu é que o seu template pode não estar conseguindo visualizar o atributo isLoading da classe. Vc já experimentou imprimir o valor do isLoading no template? Caso não tenha, verifique aí o que acontece.

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

por alberto.souzafernandes
| 173.5k xp | 50 posts
loadCustomers() {
    this.cloudService.getCustomersAll()
    .subscribe(customerArray => {
      this.customers = customerArray;
      this.isLoading = false;
      console.log('apos execucao do load' + this.isLoading);
    },
    error => {
      alert('error ');
    } );
  }
ngOnInit() {
    console.log('carregando loadCustomers ' + this.isLoading);
    this.loadCustomers();
    console.log('fim do loadCustomers ' + this.isLoading);
  }

Segue o log:

menu-cloud.component.ts:51 carregando loadCustomers true

menu-cloud.component.ts:53 fim do loadCustomers true

apos execucao do loadfalse

Eu percebi que a página toda é carregada porem o spinner só aparece depois que o método loadCustomers é executado, tanto que se eu tirar a atribuição de false (this.isLoading = false;) de dentro do método o spinner aparece depois que carregou a lista e não some.