Angular7 - Componentes

Grande parte do desenvolvimento com o Angular 7 é feito nos componentes. Os componentes são basicamente classes que interagem com o arquivo .html do componente, que é exibido no navegador. Vimos a estrutura do arquivo em um de nossos capítulos anteriores.

A estrutura do arquivo tem o componente app e consiste nos seguintes arquivos -

app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts

E se você selecionou o roteamento angular durante a configuração do projeto, os arquivos relacionados ao roteamento também serão adicionados e os arquivos são os seguintes -

app-routing.module.ts

Os arquivos acima são criados por padrão quando criamos um novo projeto usando o comando angular-cli.

Se você abrir o app.module.ts arquivo, ele tem algumas bibliotecas que são importadas e também um declarativo que é atribuído ao appcomponent da seguinte forma -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component';

@NgModule({ 
   declarations: [ 
      AppComponent 
   ], 
   imports: [ 
      BrowserModule, 
      AppRoutingModule 
   ], 
   providers: [],
   bootstrap: [AppComponent] 
})
export class AppModule { }

As declarações incluem a variável AppComponent, que já importamos. Este se torna o componente pai.

Agora, o angular-cli tem um comando para criar seu próprio componente. No entanto, o componente do aplicativo que é criado por padrão sempre permanecerá o pai e os próximos componentes criados formarão os componentes filho.

Vamos agora executar o comando para criar o componente com a linha de código abaixo -

ng g component new-cmp

Ao executar o comando acima na linha de comando, você receberá a seguinte saída -

C:\projectA7\angular7-app>ng g component new-cmp 
CREATE src/app/new-cmp/new-cmp.component.html (26 bytes) 
CREATE src/app/new-cmp/new-cmp.component.spec.ts (629 bytes) 
CREATE src/app/new-cmp/new-cmp.component.ts (272 bytes) 
CREATE src/app/new-cmp/new-cmp.component.css (0 bytes) 
UPDATE src/app/app.module.ts (477 bytes)

Agora, se formos verificar a estrutura do arquivo, obteremos a nova pasta new-cmp criada sob o src/app pasta.

Os seguintes arquivos são criados na pasta new-cmp -

new-cmp.component.css - o arquivo css para o novo componente é criado.
new-cmp.component.html - o arquivo html é criado.
new-cmp.component.spec.ts - pode ser usado para teste de unidade.
new-cmp.component.ts - aqui, podemos definir o módulo, propriedades, etc.

As alterações são adicionadas ao app.modulearquivo .ts da seguinte forma -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 

// includes the new-cmp component we created
@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
      // here it is added in declarations and will behave as a child component 
   ], 
   imports: [ 
      BrowserModule,
      AppRoutingModule 
   ], 
   providers: [], 
      bootstrap: [AppComponent] 
      //for bootstrap the AppComponent the main app component is given. 
}) 
export class AppModule { }

o new-cmp.component.ts arquivo é gerado da seguinte forma -,

import { Component, OnInit } from '@angular/core'; // here angular/core is imported.

@Component({ 
   // this is a declarator which starts with @ sign. 
   // The component word marked in bold needs to be the same. 
   selector: 'app-new-cmp', // selector to be used inside .html file. 
   templateUrl: './new-cmp.component.html', 
   // reference to the html file created in the new component. 
   styleUrls: ['./new-cmp.component.css'] // reference to the style file. 
}) 
export class NewCmpComponent implements OnInit {   
   constructor() { } 
   ngOnInit() { } 
}

Se você vir o arquivo new-cmp.component.ts acima, ele criará uma nova classe chamada NewCmpComponent, que implementa OnInit no qual há um construtor e um método chamado ngOnInit (). ngOnInit é chamado por padrão quando a classe é executada.

Vamos verificar como funciona o fluxo. Agora, o componente do aplicativo, que é criado por padrão, torna-se o componente pai. Qualquer componente adicionado posteriormente torna-se o componente filho.

Quando acertamos o url no "http://localhost:4200/" navegador, ele primeiro executa o arquivo index.html que é mostrado abaixo -

<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>Angular7App</title> 
      <base href = "/"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root>
   </body> 

</html>

O acima é o arquivo html normal e não vemos nada impresso no navegador. Vamos dar uma olhada na tag na seção do corpo.

<app-root></app-root>

Esta é a tag raiz criada pelo Angular por padrão. Esta tag tem a referência nomain.ts Arquivo.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment';

if (environment.production) { 
   enableProdMode(); 
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

O AppModule é importado do aplicativo do módulo pai principal e o mesmo é fornecido ao Módulo de bootstrap, que faz com que o appmodule seja carregado.

Vamos agora ver o app.module.ts arquivo -

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component';

@NgModule({ 
   declarations: [
      AppComponent, 
      NewCmpComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule '
   ], 
   providers: [], 
   bootstrap: [AppComponent] 
})
export class AppModule { }

Aqui o AppComponent é o nome dado, ou seja, a variável para armazenar a referência do app.component.tse o mesmo é dado ao bootstrap. Vamos agora ver oapp.component.ts Arquivo.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
}

O núcleo angular é importado e referido como o componente e o mesmo é usado no declarador como -

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})

Na referência do declarador ao seletor, templateUrl e styleUrl são fornecidos. O seletor aqui nada mais é do que a tag que é colocada no arquivo index.html que vimos acima.

A classe AppComponent possui uma variável chamada title, que é exibida no navegador. O @Component usa o templateUrl chamado app.component.html, que é o seguinte -

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{ title }}! </h1> 
</div>

Ele contém apenas o código html e o título da variável entre chaves. Ele é substituído pelo valor, que está presente noapp.component.tsArquivo. Isso é chamado de vinculação. Discutiremos o conceito de vinculação no capítulo subsequente.

Agora que criamos um novo componente chamado new-cmp. O mesmo é incluído noapp.module.ts arquivo, quando o comando é executado para criar um novo componente.

app.module.ts tem uma referência ao novo componente criado.

Vamos agora verificar os novos arquivos criados em new-cmp.

new-cmp.component.ts

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

Aqui, temos que importar o núcleo também. A referência do componente é usada no declarador.

O declarador tem o seletor chamado app-new-cmp e templateUrl e styleUrl.

O .html chamado new-cmp.component.html é o seguinte−

<p> 
   new-cmp works!
</p>

Conforme visto acima, temos o código html, ou seja, a tag p. O arquivo de estilo está vazio, pois não precisamos de nenhum estilo no momento. Mas quando executamos o projeto, não vemos nada relacionado ao novo componente sendo exibido no navegador.

O navegador exibe a seguinte tela -

Não vemos nada relacionado ao novo componente sendo exibido. O novo componente criado possui um arquivo .html com os seguintes detalhes -

<p>
   new-cmp works!
<p>

Mas não estamos obtendo o mesmo no navegador. Vamos agora ver as mudanças necessárias para que o conteúdo dos novos componentes seja exibido no navegador.

O seletor 'app-new-cmp'é criado para o novo componente de new-cmp.component.ts como mostrado abaixo -

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

@Component({ 
   selector: 'app-new-cmp', 
   templateUrl: './new-cmp.component.html', 
   styleUrls: ['./new-cmp.component.css'] 
}) 
export class NewCmpComponent implements OnInit {  
   constructor() { } 
   ngOnInit() { } 
}

O seletor, ou seja, app-new-cmp precisa ser adicionado ao app.component.html, ou seja, o pai principal criado por padrão da seguinte forma -

<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{ title }}!
   </h1>
</div>
<app-new-cmp7></app-new-cmp>

Quando o <app-new-cmp></app-new-cmp> tag for adicionada, tudo o que está presente no arquivo .html, ou seja, new-cmp.component.html do novo componente criado será exibido no navegador junto com os dados do componente pai.

Vamos adicionar mais alguns detalhes ao novo componente criado e ver a exibição no navegador.

new-cmp.component.ts

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

@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() { }
   ngOnInit() { }
}

Na classe, adicionamos uma variável chamada newcomponent e o valor é “Inserido no novo componente criado”.

A variável acima é adicionada no new-cmp.component.html arquivo da seguinte forma -

<p> 
   {{newcomponent}} 
</p>
<p> 
   new-cmp works! 
</p>

Agora, uma vez que incluímos o <app-new-cmp></app-new-cmp>seletor no app.component.html que é o .html do componente pai, o conteúdo presente no new-cmp.component.htmlarquivo é exibido no navegador. Também adicionaremos alguns css para o novo componente no arquivo new-cmp.component.css da seguinte maneira -

p { 
   color: blue; 
   font-size: 25px; 
}

Portanto, adicionamos a cor azul e o tamanho da fonte como 25px para as tags p.

A tela a seguir será exibida no navegador -

Da mesma forma, podemos criar componentes e vinculá-los usando o seletor no app.component.html arquivo de acordo com nossos requisitos.

↰ Previous page Next page ↱