Hoje vamos conhecer e aprender algumas formas de trabalhar com os componentes do Angular. Seguiremos o seguinte roteiro:

• Instalar o Angular
• Iniciar um projeto
• Criar o primeiro componente
• Testar
• Passando valores para dentro do componente
• Injetar conteúdo HTML parcial dentro de um componente

Instalar o Angular

A primeira coisa a se fazer, é instalar o framework na sua máquina. Faremos isso através do gerenciador de pacotes do NodeJS, o NPM. Se você não tem o NPM na sua máquina, basta instalar o pacote do NodeJS (aconselho baixar a versão LTS), acessando o projeto oficial: https://nodejs.org/en/.

Após a instalação do NodeJS, você pode verificar se o NPM está instalado. Abra o terminal de comando do seu computador:

npm -v

Agora é hora de fazer a instalação do cliente de comando do Angular. Para isso, abra o terminal de comando da sua máquina, e execute o seguinte comando:

npm install -g @angular/cli

Repare que usei o parâmetro -g para que a instalação do pacote fique disponível globalmente na máquina.

Sugestão: Sugiro usar o Visual Studio Code para programar com Angular, pois o editor tem uma integração muito eficiente com a linguagem TypeScript.

Iniciar um projeto

Vamos começar um projeto Angular no estilo Hello World, ainda no nosso terminal. Escolha um diretório adequado na sua máquina para armazenar o projeto, e em seguida execute o comando:

ng new ng-imasters

Após rodar o comando, é só esperar; todos os pacotes serão instalados. Abra o diretório ng-imasters no seu editor de código favorito; o cliente de comando do Angular é bem poderoso – vamos criar o nosso primeiro componente, mas antes, iniciaremos o projeto rodando o comando:

ng serve

Dentro do projeto, vamos navegar até o arquivo app.component.html, localizado em ng-imasters/src/app. Repare que o projeto inicial trouxe alguns dados de Hello World. Vamos apagar tudo!

Criando o primeiro componente

No terminal, vamos usar o comando abaixo para criar o nosso primeiro componente. Neste artigo teremos mais de um componente. Uma coisa interessante de se fazer para organizar seu código, é colocar os componentes em um diretório chamado components, por exemplo. Foi o que fiz no comando; setei o nome do diretório antes do nome do componente, assim ele vai criar o componente já dentro do diretório:

ng g c components/modalPessoa

Agora no arquivo app.component.html, vamos criar o seguinte HTML:

<h1>Imasters - O poder dos componentes Ionic</h1>
<app-modal-pessoa></app-modal-pessoa>

Só isso já é suficiente para vermos nosso primeiro componente funcionando. Ele ainda não tem nada, só uma mensagem padrão, mas já é legal a gente rodar e ver tudo funcionando no browser:

ng serve

Legal, deixa o servidor rodando, vamos até o componente no arquivo modal-pessoa.component.html, e adicionaremos algum conteúdo:

<div id="modalPessoa">
    <form>
        <label>Nome completo</label>
        <input type="text" name="nome">
        <button type="button">Enviar</button>
    </form>
</div>

Antes de salvar, também adicionei um estilo tosco a esse componente através do CSS do componente. Cada componente Angular tem um CSS separado, isso ajuda muito na hora de separar os estilos, e o melhor, quando você vai lançar em produção, o Angular junta todos os arquivos CSS em um único arquivo comprimido. Bom, né? Ai vai o CSS que coloquei no arquivo modal-pessoa.component.css:

#modalPessoa{
    padding: 1rem;
    border: 1px #ccc solid;
}

Pronto, primeiro componente criado. Vamos em frente!

Passando valores para dentro do componente

Agora, o que queremos fazer é passar uma lista de nomes para dentro do nosso componente através de uma variável. Também queremos passar um título para o modal, isso será possível graças ao @Input que importaremos dentro do componente, então no arquivo modal-pessoa.component.ts:

import { Component, OnInit, Input } from '@angular/core';

Agora, abaixo ou acima do Constructor(), vamos colocar a seguinte declaração:

@Input() nomes: any;

Com isso, agora temos o recebimento de uma variável. Essa variável terá qualquer valor (any). Você poderia ter um modelo, ou taxar um boolean, por exemplo – fica a seu critério. Agora, no app.component.js, vamos fazer o seguinte: criaremos um array de nomes para passar na hora de chamar o componente no HTML:

arrayNomes = [
        "Adélia Hilário",
        "António Gentil",
        "Brenda Castelo",
        "Diana Sales",
        "Flávia Ochoa"
    ];

De volta ao arquivo app.component.html, vamos chamar o atributo do componente passando os nomes:

<app-modal-pessoa [nomes]="arrayNomes"></app-modal-pessoa>

Ainda para vermos tudo funcionando e chegando lá do outro lado no componente, tacharemos um console.log dentro do typescript do componente (modal-pessoa.component.ts):

ngOnInit() {
   console.log(this.nomes);
}

Se ainda estiver com o ng serve rodando, olhe para o seu console do browser.

Agora que já aprendemos a passar uma variável pelo componente, vamos passar um título também, só que esse título vamos colocar direto no atributo do componente, sem usar variável:

<app-modal-pessoa titulo="Modal de pessoas" [nomes]="arrayNomes"></app-modal-pessoa>

Dentro do arquivo modal-pessoa.component.ts, adicionaremos a chegado do título no @Input:

@Input() titulo: any;

Legal, agora no lugar do console, vamos imprimir o título no HTML do componente (modal-pessoa.component.html) com uma tag H1:

<h1>{{ titulo }}</h1>

Com esses dois exemplos de passagem de parâmetros, já podemos aprender a passar valores via variável ou valor direto para dentro de um componente. Vale brincar agora de copiar o modal criando vários e mudando o título para os componentes funcionando.

Injetando conteúdo dentro do componente com ng-content

Agora vamos injetar conteúdo HTML para dentro do componente; uma vantagem de se usar essa abordagem é a reutilização do componente em vários lugares, e o conteúdo injetado é controlado pela classe onde ele foi adicionado. Vamos ao exemplo:

Vamos criar um componente chamado modal. Para isso, usamos o comando:

ng g c components/modal

O HTML desse componente vai usar a seguinte estrutura:

<div class="modal">
    <ng-content></ng-content>
</div>

Reparem que usamos a tag ng-content; ela é responsável por injetar dentro do componente o que eu colocar dentro da tag do componente, entende? Vamos à prática: vá até o arquivo app.component.html, e adicione um componente modal assim:

<app-modal>
    <h3>Modal exemplo</h3>
    <button type="button" (click)="helloWorld()">Falar</button>
</app-modal>

Tudo que estiver dentro da tag <app-modal> será injetado no componente. Vale lembrar que a função helloWorld() você vai construir na classe que estiver criando o componente. Isso é bom pois segue a ideia de reutilização. Nós construímos um componente visual, e toda a lógica fica dentro do conteúdo injetado e da classe que está usando o conteúdo. Então, para finalizar, vamos até o arquivo app.component.ts e criamos a função:

falar(){
        alert("Hello world");
}

Agora é só levantar o servidor com ng serve e ver sua aplicação rodando. Espero que tenha aprendido um pouco sobre o poder dos componentes no Angular. Com esse conhecimento você já tem base para criar seus próprios componentes.

Um abraço, e até mais!

Link projeto: https://github.com/diogomachado/ng-imasters