Olá pessoal,
Neste post vamos abordar o básico sobre a crição de diretivas em Angular.
Diretivas em Angular (2.x ou superior) são em um pouco diferentes do modo como eram criadas em AngularJs, pois nas versões atuais as diretivas não possuem templates associados, caso você precise utilizar templates html a solução seria utilizar os Components como visto nos posts anteriores:
Criando componentes em angular
Criando componentes em angular - parte 2
Conteúdo
- Introdução
- Um pouco sobre módulos
- Mãos à obra
- Adicionando à um componente
O propósito da diretiva é fornecer meios para que possamos manipular o DOM ou estender as funcionalidades do elemento no qual a diretiva terá ação, como por exemplo alterar o seu conteúdo, estilo, visibilidade etc.., dependendo da necessidade da funcionalidade a ser desenvolvida.
Vamos criar uma diretiva bem simples, apenas para que de modo didático possamos conhecer um pouco do que é possivel fazer. Nossa diretiva irá destacar o texto do componente deixando a fonte em negrito e incluindo uma cor de fundo no texto, bem simples mesmo.
Um pouco sobre módulos
Para facilitar a organização do projeto é muito importante que ele seja modularizado.O angular permite criarmos módulos customizados de modo bem prático através da CLI
O comando da cli para criar um módulo é:
ng generate module <nomeDoModulo>
ou o shortcut:
ng g m <nomeDoModulo>
Uma característica importante na criação do módulo é adicionar a opção "--routing" para criar um módulo adicional para definição das rotas em um arquivo isolado através do comando:
ng g m <nomeDoModulo> --routing
Pensando nesta organização, o projeto passou por uma refatoração em relação ao post anterior, acabamos por separar a aplicação em módulos, para facilitar a organização do código, incluindo o modulo "directives" ao projeto.
Para criar o módulo directives o comando é:
ng generate module directives
ou
ng g m directives
Github
Outra coisa importante foi adicionar o projeto no github (https://github.com/devremoto/primeiraAppAngular), assim ficará mais fácil acompanhar os próximos posts.
Mãos à obra
Através da linha de comando, vamos criar uma diretiva:
ng generate directive directives/marcaTexto
ou
ng g d directives/marcaTexto
vamos agora editar o arquivo marca-texto.directive.ts
import { Directive, ElementRef, Input, OnInit } from '@angular/core';
@Directive({
selector: '[appMarcaTexto]'
})
export class MarcaTextoDirective implements OnInit {
@Input() corDeFundo: string = 'yellow';
@Input() corDoTexto: string = 'white';
constructor(private _elemento: ElementRef) {
}
public ngOnInit() {
this.mudarFundo();
}
private mudarFundo(cor: string = 'yellow') {
this._elemento.nativeElement.style.backgroundColor = this.corDeFundo || cor;
this._elemento.nativeElement.style.color = this.corDoTexto;
this._elemento.nativeElement.style.fontWeight = 'bolder';
}
}
Assim como na criação de um componente, a diretiva também possui um decorator especial para que possa ser interpretado pelo angular:
@Directive();
Dentro da declaração do decorator incluímos a propriedade "selector", a qual será utilizada como a tag dentro do componente de exemplo que criaremos mais adiante.
@Directive({
selector: '[appMarcaTexto]'
})
Uma vez que a diretiva foi criada em um módulo customizado, para que ela fique disponível para os outros módulos devemos além de declará-lo, devemos também exportá-la, para que outros módulos possam ter acesso à diretiva. Para tanto vamos editar o arquivo directives.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MarcaTextoDirective } from './marca-texto.directive';
@NgModule({
imports: [
CommonModule
],
declarations: [MarcaTextoDirective],
exports: [MarcaTextoDirective]
})
export class DirectivesModule { }
note que devemos declarar e exportar a diretiva da seguinte forma:
declarations: [MarcaTextoDirective],
exports: [MarcaTextoDirective]
para visualizar a nossa diretiva, vamos criar um componente dentro do módulo "exemplos" que também foi adicionado ao projeto do github.
O compmando para a criação deste componente de exemplo é:
ng g c exemplos/directives
"Para criar o componente dentro de um módulo, devomos escrever o comando incluindo o caminho do módulo no qual o componente pertencerá, o angular/cli irá nos ajudar criando o componente e também irá declará-lo dentro do módulo."
O conteúdo do template "directives.component.html é:
<h1>Diretivas</h1>
<hr>
<div class="container-fluid">
<h2>Exemplo - marca texto</h2>
<div appMarcaTexto corDeFundo='green'>teste</div>
</div>
Adicionamos a rota para componente dentro do arquivo "exemplos/exemplos-routing.module.ts"
quer ficará assim:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ComponentsComponent } from './components/components.component';
import { DirectivesComponent } from './directives/directives.component';
const routes: Routes = [
{
path: 'exemplos', children: [
{ path: '', component: ComponentsComponent },
{ path: 'componentes', component: ComponentsComponent },
{ path: 'diretivas', component: DirectivesComponent }
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ExemplosRoutingModule { }
Agora podemos rodar nossa aplicação:
ng serve -o
e navegar para a rota "localhost/exemplos/diretivas"
