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.