Angular 6 com uma função para delay

Israel Junior
Aug 31, 2018 · 2 min read

criando uma função para retornar uma promise com o setTimeout.

Angular 6 função de delay com promise.

Navegando na internet encontrei um trecho de código que mostra como fazer para criar uma função que simula um delay usando o setTimeout e retornando um promise achei muito interessante e resolvi fazer uma pequena implementação dela no Angular só para brincar.

O autor original do post é o James K. Nelson, que inclusive tem um curso de JavaScript se quiser conhecer é só acessar o link.

Bom vamos ao código, primeiro vamos gerar um projeto básico com o angular cli 6 e adicionar o bootstrap e o sweetalert2 só pra melhor um pouco a cara do projeto.

$ ng new sample-delay --style scss
$ cd sample-delay
$ yarn add bootstrap sweetalert2
$ code .

Uma vez o projeto criado eu uso o Visual Studio Code para editar os meus códigos, agora e só incluir as implementações desejadas.

Primeiro incluir o css do bootstrap e o css do sweetalert2 no arquivo style.scss como no exemplo abaixo.

Agora é alterar o arquivo app.component.ts e incluir o código como no exemplo abaixo.

Por último vamos alterar o arquivo app.component.html e incluir o código de front do nosso projeto.

Agora é só rodar o projeto e testar o nosso mini projeto de exemplo.

$ ng serve

E o resultado final vai ser uma tela como a mostrada abaixo.

Angular 6 com delay

Esse foi só um projeto de exemplo que criei baseado na ideia de uma função assíncrona delay com suporte a promise e async/await. o código completo do projeto está no github.

AprendaJS

Blog dedicado a troca de informações sobre o universo JavaScript

    Israel Junior

    Written by

    Lifelong learner still trying to learn the secret of strength. Full Stack Web Developer working with Ruby on Rails, Node.JS and Serverless.

    AprendaJS

    AprendaJS

    Blog dedicado a troca de informações sobre o universo JavaScript

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade