Angular Components: Conhecendo e configurando no seu projeto

Fique por dentro

Neste artigo entenderemos como Components funcionam no Angular. Partindo de um novo projeto, veremos como eles s�o criados, a sua estrutura e como implementar alguma l�gica a partir deles.

Atualmente, o Angular � um dos mais conhecidos frameworks para desenvolvimento web. Criado e mantido pela Google, ele j� tem uma longa estrada no mercado. Uma das partes mais importantes de um projeto Angular � o que chamamos de componentes, pois eles s�o a parte l�gica da aplicaç�o.

Estrutura de um Component

Os componentes s�o classes escritas em TypeScript que recebem o decorator @Component, assim como mostra o C�digo 1. Vamos analisar esse c�digo juntos ao longo dessa seç�o, portanto n�o se preocupe em entend�-lo completamente agora. Atente-se apenas para o fato dele ser uma classe com um decorator, por enquanto.

@Component({  selector: 'cadastro',
   templateUrl: 'cadastro.component.html',
    styleUrls: ['cadastro.component.css']
})
export class CadastroComponent {
     
}

C�digo 1. Exemplo de um Component no Angular

Quando analisamos a estrutura de um componente, podemos dividi-lo nas seguintes partes:

Metadata: s�o definiç�es que iremos informar ao Angular que a nossa classe � um Component, por meio de decorators, nesse caso @Component
Classe: assim como em qualquer linguagem de programaç�o que utiliza o paradigma da orientaç�o a objeto, possui suas propriedades e m�todos

Um Component � um tipo de classe existente em uma aplicaç�o Angular, eles s�o identificados com o decorator @Component. Neste decorator existem algumas propriedades mais utilizadas como: selector, templateUrl e style. Vamos especific�-las:

selector � como identificamos o nosso componente. Para todo o componente existe um elemento �nico associado que permite que ele seja adicionado em um documento HTML. Nesse caso, o nome do elemento desse componente � cadastro e deve ser escrito como <cadastro></cadastro>
TemplateUrl � o nome do documento HTML que ser� a parte visual do componente. Nele podemos ter c�digo em HTML juntamente com todos os bindings e diretivas necess�rios para a exibiç�o do componente no navegador
Template tamb�m usado para descrever a parte visual do componente, por�m nesse caso podemos fornecer c�digo HTML "hard coded", como texto
styleUrl � onde informamos quais folhas de estilo cont�m o c�digo CSS que ser� aplicado ao template do componente.

Com isso podemos concluir que a estrutura de um componente Angular deve ser formada por esses tr�s elementos, template (HTML), estilo (CSS) e classe (TypeScript). Essas partes s�o organizadas em arquivos separados e unidas nos metadados do componente atrav�s do decorator @Component

No C�digo 2 vemos uma outra forma de descrever o template do componente usando a propriedade template, sem a necessidade de criar um arquivo HTML no projeto.

@Component({  selector: 'cadastro',
    template:'<input type="text"[(ngModel)]="nome" name="nome" id="nome"/>',
    styleUrls: ['cadastro.component.css']
})
export class CadastroComponent {
     
}

C�digo 2. Outro exemplo de Component usando a propriedade template ao inv�s de templateUrl

Como boa pr�tica, o c�digo HTML implementado na propriedade template deve conter poucas linhas. Caso este seja um c�digo mais elaborado � recomend�vel coloc�-lo em um documento HTML, utilizando a propriedade templateUrl para indicar a localizaç�o deste arquivo.

Podemos fazer refer�ncia ao Component CadastroComponent em outros componentes do projeto usando o seletor cadastro. Nesse caso basta colocarmos a tag <cadastro></cadastro> dentro do HTML do template.

Criando componente com o Angular CLI

Em um projeto Angular usaremos uma ferramenta chamada Angular CLI para criar componentes. Com ela nos preocupamos menos com a estrutura do componente, pois ela adiciona o mesmo ao projeto j� com um c�digo inicial automaticamente. Vamos ver como usar essa ferramenta na pr�tica nesta seç�o.

Considerando que o Angular j� se encontra instalado no seu sistema operacional, iremos em um terminal, no caso do Windows o cmd e no caso de Linux e MacOS o terminal, para criar uma pasta para um projeto de exemplo com o nome "artigo". Para isso usamos o comando no C�digo 3 para criaç�o do projeto.

ng new artigo

C�digo 3. Comando para criaç�o do projeto Angular

Durante a execuç�o do comando, dependendo da vers�o do Angular CLI instalada em seu computador, podem aparecer algumas perguntas relacionadas a criaç�o do projeto, conforme a Figura 1.

Figura 1. Perguntas que ocorrem durante a criaç�o do projeto

Para este projeto, n�o precisaremos utilizar rotas, que tem a ver com a navegaç�o entre as p�ginas do projeto. Portanto, na primeira pergunta informe N para n�o gerar um arquivo de rota. Como linguagem de estilo usaremos o CSS, ent�o pressione a tecla ENTER sobre essa opç�o. Durante o processo de criaç�o do projeto ser� criada uma pasta chamada "artigo" no diret�rio atual com toda estrutura do projeto.

No final da instalaç�o pode aparecer uma pergunta se se deseja enviar informaç�es para o time do Angular, como visto na Figura 2., mas isso � opcional. Para saber quais informaç�es ser�o coletadas consulte a documentaç�o Usage Metrics Gathering .

Figura 2. Se deseja enviar informaç�es para o time do Angular

Quando terminar, vamos entrar na pasta criada para executarmos o comando no C�digo 4. Esse comando vai iniciar a aplicaç�o na porta padr�o, 4200.

ng serve

C�digo 4. Comando usado para iniciar a aplicaç�o

Se ao digitar ng serve n�o ocorrer nenhum erro, conseguiremos executar a aplicaç�o. Digite "http://localhost:4200" em seu navegador para visualizarmos a tela com as informaç�es sobre a aplicaç�o, como mostra a Figura 3.

Figura 3. Aplicaç�o aberta no browser

Localizando os componentes do projeto

No projeto criado j� existe um componente criado por padr�o, como podemos observar na Figura 4.

Figura 4. Estrutura do projeto criado

Analisando a Figura 4 podemos identificar dentro da pasta chamada "app" o arquivo "app.component.ts", criado automaticamente. Se o abrirmos veremos que a sua estrutura � igual a do C�digo 1, apenas um classe decorada.

Criaç�o de um componente

Agora que temos o projeto criado vamos adicionar nele um novo componente. A maioria das aplicaç�es Angular ser� composta de muitos componentes. Para criar um novo componente deveremos executar no terminal o comando visto no C�digo 5 dentro da pasta do projeto.

ng g component pagina

C�digo 5. C�digo para a criaç�o do Component

O comando acima gerar� um novo componente dentro da pasta "app" chamado pagina, dentro de uma pasta chamada "pagina". Esse componente ser� composto pelos arquivos "pagina.component.html", "pagina.component.css" e "pagina.component.ts", que cont�m a estrutura do Component presente no C�digo 6.

import { Component, OnInit } from '@angular/core'; 
  @Component({
    selector: 'app-pagina',
    templateUrl: './pagina.component.html',
    styleUrls: ['./pagina.component.css']
})
export class PaginaComponent implements OnInit {
   
    constructor() { }
   
    ngOnInit() { }
   
}

C�digo 6. Conte�do do arquivo pagina.component.ts

O Angular CLI facilita muito a criaç�o de um novo componente, pois al�m de criar os arquivos que o comp�em, tamb�m registra o componente a n�vel de projeto. No Angular, todo componente precisa ser registrado em um m�dulo antes de ser utilizado. O Angular CLI, ao criar o componente, tamb�m configura a refer�ncia para ele no arquivo app.modules.ts, conforme C�digo 7, de modo que n�o precisamos nos preocupar com esse passo.

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';
   
import { AppComponent } from './app.component';
import { PaginaComponent } from './pagina/pagina.component';
   
@NgModule({
    declarations: [
      AppComponent,
      PaginaComponent
    ],
    imports: [
      BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

C�digo 7. V�nculo do PaginaComponent no arquivo app.modules.ts

Como vimos, as refer�ncias aos componentes ficam dentro do decorator @NgModule na propriedade declarations. � nela que, a princ�pio, ficar�o todos os componentes da nossa aplicaç�o.

Utilizando um componente

Agora, utilizaremos o componente "pagina" para entender como ele pode funcionar em uma aplicaç�o. Ser�o exibidos alguns textos no browser, por�m o conte�do do texto estar� no arquivo pagina.component.ts e usaremos o recurso do binding do Angular para exibir na view.

No arquivo pagina.component.ts colocaremos as vari�veis que receber�o o t�tulo e o conte�do do texto.

Conforme C�digo 8, criaremos duas vari�veis do tipo string: uma chamada titulo e a outra chamada texto. Ambas ter�o o modificador de acesso public, j� que usaremos em uma view (todo ou parte de uma p�gina web) da aplicaç�o.

import { Component, OnInit } from '@angular/core'; 
@Component({
    selector: 'app-pagina',
    templateUrl: './pagina.component.html',
    styleUrls: ['./pagina.component.css']
})
export class PaginaComponent implements OnInit {
   
    public titulo: string;
    public texto: string;
   
    constructor() { }
   
    ngOnInit() { }
   
}

C�digo 8. Implementaç�o das vari�veis no arquivo pagina.component.ts

Dentro do decorator @Component temos a propriedade templateUrl, onde nesse caso colocaremos o c�digo HTML no arquivo "pagina.component.html".

No arquivo "pagina.component.html", implementamos um c�digo que exibir� na tela o t�tulo e o texto, como veremos no C�digo 9.

<div id="header">    
	<h1><p class="textoTitulo">Artigo</p></h1>
</div>
<div id="titulo">
      <h2>{}</h2>
</div>
<div id="texto">
      {}
</div>

C�digo 9. Implementaç�o na view pagina.component.html

Para que os valores das vari�veis possam ser exibidos na view podemos utilizar a interpolation (interpolaç�o), que consiste em adicionar o nome da vari�vel entre chaves duplas {{ }} dentro do elemento em que o valor da vari�vel deve aparecer.

Colocaremos no arquivo "pagina.component.ts" o conte�do do C�digo 10 com os valores das vari�veis criadas para exibiç�o na view.

 import { Component, OnInit } from '@angular/core';
   
@Component({
    selector: 'app-pagina',
    templateUrl: './pagina.component.html',
    styleUrls: ['./pagina.component.css']
})
export class PaginaComponent implements OnInit {
   
    public titulo: string;
    public texto: string;
   
    constructor() {}
   
    ngOnInit() {
   
      this.titulo = 'O que s�o Components no Angular?';
      this.texto = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                    sed do eiusmod tempor incididunt ut labore et dolore magna 
                    aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. 
                    Ipsum dolor sit amet consectetur adipiscing elit ut aliquam 
                    purus. Egestas tellus rutrum tellus pellentesque eu tincidunt 
                    tortor aliquam nulla. In dictum non consectetur a erat nam at. 
                    Enim ut sem viverra aliquet eget sit amet tellus cras. 
                    Fames ac turpis egestas integer. Odio pellentesque diam volutpat 
                    commodo sed egestas. Augue lacus viverra vitae congue eu consequat 
                    ac. Et malesuada fames ac turpis egestas maecenas pharetra convallis. 
                    Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. 
                    Sollicitudin tempor id eu nisl nunc mi ipsum faucibus.`
      
    }
   
}

C�digo 10. Colocando os valores das vari�veis no arquivo "pagina.component.ts"

Para conseguirmos visualizar o conte�do da nossa view, visto que n�o configuramos uma rota no nosso projeto, teremos que fazer uma alteraç�o no arquivo "app.component.html" na raiz da nossa pasta "app". Excluiremos o conte�do j� existente e colocaremos o seletor do nosso componente app-pagina para quando carregarmos a aplicaç�o a nossa view possa aparecer, como mostra a Figura 5.

Figura 5. Colocando o seletor no arquivo app.component.html

Caso a aplicaç�o esteja em execuç�o, logo a nova p�gina ser� exibida, do contr�rio, dever� executar o comando ng serve em um terminal dentro da pasta do nosso projeto.

Poderemos dar uma melhorada no visual da aplicaç�o editando o arquivo pagina.compoment.css, onde colocaremos o c�digo CSS do C�digo 11.

#header{   position: relative;
      width: 100%;
      height: 50px;
      background-color: darkgrey;
}

.textoTitulo{
      position: absolute;
      left: 12px;
      top: -25px;
}

#titulo{
      text-align: center;
}
  
#texto{
      text-align: justify;
}

C�digo 11. Inclus�o da folha de estilos no pagina.compoment.css

Quando a p�gina for executada novamente veremos a aplicaç�o com um visual bem melhor.

Conclus�o

Os componentes s�o uma parte importante de toda aplicaç�o Angular, pois � neles que criamos a l�gica por tr�s do funcionamento das views. Neste artigo vimos como eles s�o estruturados e como implement�-los em um projeto j� criado. Tamb�m vimos como podemos configurar as vari�veis criadas dentro de um componente e fazer com que os seus valores sejam visualizados em um template.