Crie sua própria biblioteca de componentes com Angular 12+

Globalize seu código com uma biblioteca

Muitos desenvolvedores Angular utilizam bibliotecas de terceiros como Angular Material, PrimeNG, etc. Mas e se pudéssemos criar nossa própria biblioteca e compartilhá-la com o resto do mundo? Bem, é isso que vamos aprender neste curso. Veremos como fazer isso do zero com o Angular, criando componentes, pipes, serviços e diretivas para mostrar todo o potencial. Aprenderemos como enviá-lo para o GitHub e npmjs, e como gerar automaticamente a documentação com o ComposeDoc. Também criaremos uma documentação personalizada semelhante à do PrimeNG. Aqui estão os elementos que iremos criar:

Join:

Um pipe para juntar vários elementos com um separador especificado.

Spinner:

Um componente para exibir um spinner de carregamento enquanto espera por dados.

Dropdown:

Um componente que nos permite escolher entre uma lista de opções, com um recurso de pesquisa integrado.

Toast:

Um componente que exibe mensagens de erro, informações, alertas ou notificações de sucesso.

ClickOutSide:

Uma diretiva que executa uma ação ao clicar fora de um elemento específico.

LoadIframe:

Uma diretiva que dispara uma ação ao carregar um iframe com outro site.

Config Service:

Um serviço para gerenciar informações de um arquivo JSON, útil para fins de configuração.

Detail:

Um componente de detalhes base que pode ser personalizado com conteúdo.

Block-List:

Um componente para exibir elementos em blocos, com ações adicionais.

Tabs:

Um componente para exibir diferentes seções na mesma página.

Resolution Service:

Um serviço que indica a resolução atual (mobile, tablet ou web).

Accordion:

Um componente que revela conteúdo quando aberto.

Translate:

Um serviço para tradução de texto.

Ng-Model-Base:

Uma classe base para usar nossos componentes com ngModel.

Toggle:

Um componente para alternar entre estados ativo e inativo.

Modal:

Um componente para exibir modais. Este curso foi criado usando o Angular 12, mas pode ser aplicado a versões posteriores a partir da versão 6. Também aprenderemos como gerenciar versões de bibliotecas e como enviar nossa biblioteca para o GitHub usando o Visual Studio Code. Além disso, exploraremos como funcionam os Pacotes do GitHub. Aproveite o curso!

O que você aprenderá

- Criar a estrutura de uma biblioteca no Angular. - Usar sua biblioteca em seus próprios projetos. - Compartilhar sua biblioteca com outros. - Aprender como enviar seu código para o GitHub. - Criar seus próprios Pacotes do GitHub. - Gerenciar versões.