- ngOnChanges => disparado sempre quando o valor do property-binding é atualizado.
- ngOnInit => Quando o componente é inicializado.
- ngAfterViewInit => depois que o angular inicializa os componentes views e views filhas.
- ngAfterViewChecked => após a checagem dos componentes views e views filhas.
- diretivas de componentes => diretivas dos nossos componentes => <meu-componente></meu-componente>
- diretivas estruturais => vem precedida de * (asterísco) => *ngFor, *ngIf, *ngSwitch, etc.
- diretivas de atributos => interagem com o elemento que foram aplicadas => ngStyle, ngClass, etc.
Exportar a diretiva:
- As diretivas podem ser exportadas e terem seus métodos expostos da seguinte forma:
@Directive({
selector: '[nome_do_seletor_da_diretiva]',
exportAs: 'nome_da_diretiva'
})
- Isso possibilita que sejam usados de outras formas, veja como pegar a diretiva e usar seus métodos:
<input type="text" class="form-control" [(ngModel)]="nome"
(focus)="adicionado = false" nome_do_seletor_da_diretiva
#campo="nome_da_diretiva">
<button class="btn btn-info" (click)="campo.metodo_da_diretiva()">Clique-me</button>
NG-CONTENT
- Permite passar conteúdo (incluindo outros componentes) para um componente.
Observe o uso do seletor e da classe para que isso funcione.
- Se eu tiver um componente chamado exemplo-ng-content.component.html com o seguinte conteúdo:
<div class="panel panel-default">
<div class="panel-heading">
<ng-content
select=".titulo"></ng-content>
</div>
<div class="panel-body">
<ng-content
select=".corpo"></ng-content>
</div>
</div>
pode ser usado em outro componente desta forma:
<app-exemplo-ng-content>
<div
class="titulo">Título do Painel</div>
<div
class="corpo">
Conteúdo passado para o componente corpo.
</div>
<div
class="corpo">
Conteúdo 2 passado para o componente corpo.
</div>
</app-exemplo-ng-content>
Form validations
- autocomplete="off" => desabilita autocomplite no formulário
- diretivas do angular:
required, email, minlength="5", maxlength="15", pattern="[a-zA-Z ]*"
- pegar o formulario:
<form #meuForm="ngForm">
- pegar campos do formulário:
<input type="text" #nome="ngModel" name="nome" [(ngModel)]="cliente.nome" />
- validar:
nome.haserror('required') => pode ser usado em um ngIf por exemplo e exibir ou não uma mensagem.
- propriedades interessantes:
nome_do_campo.touched => se o campo foi tocado
nome_do_campo.pristine => se o campo já teve algum valor ou está virgem
nome_do_campo.dirty => se o campo já foi alterado
- estilizando componentes invalidos dos forms com as classes do angular:
input.ng-invalid.ng-touched, select.ng-invalid.ng-touched {
border: 1px solid red;
}
- binding de class:
<input type="text" #nome="ngModel" name="nome" [(ngModel)]="cliente.nome"
[class.nome_da_classe]="propriedade_ou_condicao_boolean"/>
- binding de style:
<input type="text" #nome="ngModel" name="nome" [(ngModel)]="cliente.nome"
[style.nome_da_propriedade]="propriedade_ou_condicao_boolean ? 'valor_1' : 'valor_2' "/>
- resetar um formulario:
<form autocomplete="off" #usuarioForm="ngForm"
(ngSubmit)="salvar(usuarioForm)">
No submit do form estamos chamando o método salvar e passando o próprio form.
Então no componente basta resetarmos o form:
salvar(form: NgForm) {
//faz outras coisas
...
//reseta o formulário
form.reset();
}
Serviços
- A anotação @Injectable() permite que o serviço receba injeção de outros serviços.
- Serviços servem para comunicação com servidor.
- Para evitar duplicação de código.
- Lógica da aplicação deve estar nos serviços.
- Classes utilitárias devem ser feitas como serviços.
- Serviços
são singletons se forem adicionados dentro de qualquer módulo na propriedade "providers: []" do decorator @NgModule. O que permite compartilhar recursos entre componentes naturalmente (listas, variáveis, etc).
-
Caso sejam adicionados na propriedade "providers: []" do componente, serão uma instância para cada componente e componentes filhos, o que já impede esse compartilhamento global.
- Uma vez criadas instâncias separadas por componentes, a comunicação entre eles só pode ser feita através do EventEmitter e se o EventEmitter for uma propriedade estática.
static variavel_evento = new EventEmitter();
//dentro de algum método
this.variavel_evento.emit( objeto_ou_valor );
- Quem for escutar o evento deve fazer da seguinte forma:
// no contrutor recebe o serviço
constructor(private cursosService: CursosService) {}
// no ngOnInit se inscreve como ouvinte
CursosService.criouNovoCurso.subscribe(
//faz alguma coisa aqui
curso => this.cursos.push(curso)
);
- Os services são declarados no provider dos módulos ou componentes como já descrito acima,
da forma abreviada ou extensa.
Abreviada:
@NgModule({
declarations: [
AppComponent,
FuncionarioCardComponent,
FuncionarioFormComponent
],
imports: [
BrowserModule
],
providers: [
FuncionarioService
],
bootstrap: [AppComponent]
})
Extensa
@NgModule({
declarations: [
AppComponent,
FuncionarioCardComponent,
FuncionarioFormComponent
],
imports: [
BrowserModule
],
providers: [
{ provide: FuncionarioService, useClass: FuncionarioService, }
],
bootstrap: [AppComponent]
})
Na forma extensa, é possível fornecer um método Factory ao invés de uma classe.
A vantagem é que a factory pode instanciar uma classe com parâmetros se for necessário.
const criarFuncionarioService = () => {
return new FuncionarioAbreviadoService(param1, param2...);
}
@NgModule({
declarations: [
AppComponent,
FuncionarioCardComponent,
FuncionarioFormComponent
],
imports: [
BrowserModule
],
providers: [
{ provide: FuncionarioService, useFactory: criarFuncionarioService }
],
bootstrap: [AppComponent]
})
Rotas
- Cria-se uma constante em um arquivo app.routing.ts ou no app.module.ts que seja
do tipo Routes do pacote "@angular/router". Esse paths e componentes.
- O Routes é um array de paths e componentes e deve ser preenchido como no
exemplo abaixo:
const APP_ROUTES: Routes = [
{ path: 'lancamentos', component: LancamentosPesquisaComponent },
{ path: 'lancamentos/novo', component: LancamentosCadastroComponent },
{ path: 'pessoas', component: PessoasPesquisaComponent },
{ path: 'pessoas/novo', component: PessoasCadastroComponent }
]
- Essa constante deve passar para uma constante do tipo ModuleWithProviders do pacote "@angular/core".
- Para isso é preciso usar o RouterModule do "@angular/router". Se essa constante foi criada em um arquivo
separado, ela deve ser exportada. O código fica assim:
export const routing: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);
- Para usar as rotas coloca-se a diretiva routerLink nos links recebendo o devido path declarado na constante
que no exemplo chamei de APP_ROUTES.
<li class="navbar-menuitem"><a routerLink="lancamentos">Lançamentos</a></li>
- Para as rotas funcionarem, em cada módulo é necessário importar o RouterModule do '@angular/router'.
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
RouterModule
],
providers: [
...
],
bootstrap: [AppComponent]
})
- Para destacar rotas ativas, basta usar a diretiva routerLinkActive passando o nome da classe CSS que contém o estilo desejado.
<li class="navbar-menuitem" routerLinkActive="ativo"><a routerLink="lancamentos">Lançamentos</a></li>
