DEV Community: Felipe Carvalho

CanDeactivate: Confirmando se o usuário deseja abandonar a página e descartar alterações

Felipe Carvalho — Wed, 25 Sep 2019 02:08:26 +0000

Introdução

Você já deve ter se deparado com algum pop-up informando que o formulário possui alterações e que se abandonar a página, elas serão descartadas.
Esquecer de salvar um formulário é relativamente comum, então, neste post demonstrarei uma implementação simples com uma funcionalidade que o próprio Angular disponibiliza, o CanDeactivate.

Resumo

Criaremos um guard que será aplicado a uma rota. Este guard terá uma interface que deverá ser implementada pelo nosso componente e essa implementação deverá retornar um true quando o usuário puder deixar a página e false para o contrário. Simples, não?

Vamos ao exemplo

O exemplo consiste em um formulário e uma navegação entre dois links. Quando o usuário tiver modificado algo no formulário e não salvá-lo e tentar ir para "Outra página", uma confirmação será emitida.

Criação do Guard

OnComponentDeactivate é a interface que os componentes implementarão, ela poderá retornar um boolean de forma síncrona ou assíncrona, ou um UrlTree.

import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

export interface OnComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean | UrlTree;
}

export class CanDeactivateGuard implements CanDeactivate<OnComponentDeactivate> {
  constructor() { }

  canDeactivate(
    component: OnComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return component.canDeactivate();
  }
}

Obs.: Não é muito comum usar UrlTree com o CanDeactivate. Não acredito que isso seja o comportamento esperado, mas, retornando um UrlTree, o Angular tenta novamente "desativar" a página atual, o que acaba gerando um loop infinito. A única solução que encontrei, foi com a seguinte verificação dentro do método canDeactivate:

        const response = component.canDeactivate();

        if (response instanceof UrlTree 
            && nextState.url == response.toString()) {
            return true;
        }

        return  response;

Incluindo o Guard nos providers

Esse Guard funcionará como um serviço e deverá estar na seção providers. Meu app.module ficou da seguinte forma:

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

Aplicando o Guard à rota

Estamos quase lá. Também devemos definir quais rotas acionarão o CanDeactivateGuard. Em meu app-routing.module.ts, defini que o meu componente de formulário irá acioná-lo:

const routes: Routes = [
  { path: "", redirectTo: "/formulario", pathMatch: "full" },
  { path: "formulario", component: FormularioComponent, canDeactivate: [CanDeactivateGuard] },
  { path: "outra", component: OutraPaginaComponent }
];

Implementando a interface

Agora só resta implementar a interface em nosso componente. Neste exemplo, utilizei o método confirm do javascript, que após a resposta do usuário, retornará um boolean. Nada impede que você utilize uma modal mais bonita ou aplique qualquer outro tipo de lógica para permitir ou não a desativação do seu componente, desde que forneça um dos retornos esperados.
Verifiquei se o usuário fez alguma alteração no formulário através da propriedade dirty. Quando o formulário for salvo, eu reseto esse estado através do markAsPristine() e usuário não precisará mais confirmar se deseja sair da página:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { OnComponentDeactivate } from '../can-deactivate.guard';
import { Observable } from 'rxjs';
import { UrlTree } from '@angular/router';

@Component({
  selector: 'app-formulario',
  templateUrl: './formulario.component.html',
  styleUrls: ['./formulario.component.css']
})
export class FormularioComponent implements OnInit, OnComponentDeactivate {

  form: FormGroup;

  constructor(private router: Router) { }

  ngOnInit() {
    this.form = new FormGroup({
      "nome": new FormControl(null, [Validators.required, Validators.minLength(3)])
    });
  }

  salvar() {
    this.form.markAsPristine();
  }

  canDeactivate(): boolean | Observable<boolean> | Promise<boolean> | UrlTree {
    if (this.form.dirty) {
      return confirm("As alterações no formulário não foram salvas e serão descartadas, deseja prosseguir?");
    } else {
      return true;
    }
  };
}

Vamos ver funcionando?

Insira qualquer coisa no campo do formulário e tente navegar para "Outra página".
Caso não esteja vendo o exemplo abaixo, clique aqui.

Custom Validators com ReactiveForms - síncronos e assíncronos!

Felipe Carvalho — Fri, 19 Jul 2019 22:50:12 +0000

Introdução

ReactiveForms nos permite criar validações customizadas que alterarão o estado do formulário da mesma forma que as validações comuns o fazem, sejam elas síncronas ou assíncronas.
Demonstrarei como criá-las baseado no exemplo que criei no post anterior: Introdução aos Reactive Forms!

Validação síncrona

Foi criada uma função de validação chamada senhasProibidas que recebe um FormControl, que será o controle onde aplicaremos a função.
Ela basicamente está validando se a senha é 12345 e retornando uma estrutura que o formulário identificará como erro. Mais abaixo explicarei ponto a ponto.



senhasProibidas(control: FormControl): { [s: string]: boolean } {
  if (control.value === "12345") {
    return { 'senhaProibida': true };
  } else {
    return null;
  }
}

Criado o método de validação, ele pode ser aplicado no controle que criamos ao instanciar o formulário. Repare que passamos a função senhasProibidas no mesmo array que as validações comuns.



this.usuarioForm = new FormGroup({
  "nome": new FormControl("João", [Validators.required]),
  "endereco": new FormControl(),
  "acesso": new FormGroup({
    "email": new FormControl(null, [Validators.required, Validators.email]),
    "senha": new FormControl(null, [Validators.required, Validators.minLength(3), this.senhasProibidas])
  }),
  "genero": new FormControl("M", [Validators.required]),
  "estadoCivil": new FormControl(null, [Validators.required]),
  "telefones": new FormArray([])
});

Mas o que é esse retorno { [s: string]: boolean }?!

Quando definimos uma propriedade entre [colchetes], criamos a possibilidade de informar qualquer chave para aquele objeto, isso também pode ser utilizado como um "truque" para permitir uma classe receber qualquer propriedade, sem que o typescript acuse erro. Ao invés de criar a estrutura do objeto no retorno, poderíamos também criar uma classe, sem problema algum:



export class ChaveValor {
  [s: string]: boolean;
}

Porque retornamos null quando o valor é válido?

Quando detectamos erro, retornamos um chave-valor "senhaProibida": true, conforme o que foi estabelecido na declaração da função.
Porém, quando o valor está OK, a função retorna null ao invés de 'senhaProibida': false. É necessário retornar null pois é assim que o Angular interpreta que não houve erros naquela validação.



  if (control.value === "12345") {
    return { 'senhaProibida': true };
  } else {
    return null;
  }

Exibi a estrutura criada com console.log para visualizarmos como ocorre a validação.
Quando retornamos null, temos o seguinte estado:

Se temos key: true, o Angular já identifica que o controle está inválido:

Agora, se temos key: false, o controle está detectando que há algo dentro de errors e, apesar de querermos sinalizar que o controle está válido, ao passar algo para a propriedade, o Angular considera o controle inválido:

Validação assíncrona

Foi criada uma função que irá retornar uma chave e um boolean quando algum erro for detectado e nulo quando não houver erro, porém, este retorno deve ocorrer em forma de Observable (poderia ser Promise, também).
Na função, uma requisição ao servidor foi simulada com um setTimeout para verificar se o e-mail informado é email@proibido.com:



emailsProibidos(control): Observable<{ [s: string]: boolean }> {
  return new Observable<{ [s: string]: boolean }>(observer => {
    setTimeout(() => {
      if (control.value == "email@proibido.com") {
        observer.next({ "emailProibido": true });
      } else {
        observer.next(null);
      }
      observer.complete();
    }, 2000);
  });
}

Após criar o método de validação, ele pode ser aplicado no controle que criamos ao instanciar o formulário.



this.usuarioForm = new FormGroup({
  "nome": new FormControl("João", [Validators.required]),
  "endereco": new FormControl(),
  "acesso": new FormGroup({
    "email": new FormControl(null, [Validators.required, Validators.email], this.emailsProibidos),
    "senha": new FormControl(null, [Validators.required, Validators.minLength(3), this.senhasProibidas])
  }),
  "genero": new FormControl("M", [Validators.required]),
  "estadoCivil": new FormControl(null, [Validators.required]),
  "telefones": new FormArray([])
});

No controle email, o novo validador foi adicionado após os validadores "comuns". O terceiro parâmetro do FormControl recebe os validadores assíncronos:

Agora, é importante observar que o formulário, enquanto espera a validação ser concluída, assume o estado PENDING. Relacionado a esse comportamento, no post anterior (mencionado no início deste), destaquei a importância de usar !usuarioForm.valid quando for desabilitar o botão submit.

Vamos ver funcionando?

Informe a senha 12345 e o e-mail email@proibido.com e veja a validação atuando.
Recomendo abrir em uma nova aba e você pode fazer isso clicando aqui.

Introdução aos Reactive Forms!

Felipe Carvalho — Wed, 17 Jul 2019 18:30:13 +0000

Introdução

Com Reactive Forms, conseguimos alcançar um controle maior sobre formulários: ao contrário dos Template Driven Forms (também chamado de TD Forms) sua estrutura é criada no componente e adicionamos referências à essa estrutura no template, dessa forma, temos um controle maior e facilitado sobre seus elementos.
Além de controles básicos sobre o formulário (estado, limpar, preencher, etc.), os Reactive Forms nos fornece controle sobre:

Campos (FormControls)
Grupos de campos (FormGroups)
Campos multi-valor com identificador próprio (FormArray)
Validações customizadas síncronas
Validações customizadas assíncronas (consultando servidor, por exemplo)
Adição e remoção de controles a qualquer momento
Manipulação de controles

Objetivo

Construir um formulário que atenda ao seguinte modelo:



{
    "nome": "Felipe dos Santos Carvalho",
    "endereco": "Rua Um",
    "acesso": {
        "email": "contato@felipecarvalho.net",
        "senha": "senha"
    },
    "telefones": ["12345678", "23456789"]
}

Campos de telefones devem ser adicionados dinamicamente e deverão ser obrigatórios quando adicionados.
Todos campos devem ser obrigatórios, exceto endereço.
O campo email deve possuir validação de email.
O campo senha deve receber ao menos 3 caracteres.
Devem existir controles para preencher, limpar e enviar o formulário, além de visualizações do estado atual do formulário.
O formulário não ficará muito bonito, mas os controles ao redor dele facilitarão o entendimento:
Ele se parecerá com:

Implementação

Antes de tudo, o módulo ReactiveFormsModule deve ser incluído nos imports do módulo da aplicação. No caso, em app.module:



import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

Definindo a estrutura do formulário

No componente onde o formulário será exibido (app.component), uma variável foi criada para armazenar a estrutura do formulário. A estrutura foi instanciada no ngOnInit(). Basicamente foi criado um FormGroup com FormControls, um outro FormGroup e um FormArray.

FormControl: controle que será aplicado aos campos do formulário, podendo receber como parâmetro um valor inicial, array de validadores (inclusive customatizados) e um array de validadores assíncronos.
FormArray: controle para campos multi-valor, onde cada índice do array é um identificador para um valor. Agrupa FormControls. Obs.: importante ressaltar que não é o caso de um multi-select, para eles, o FormControl é suficiente.
FormGroup: agrupa os controles acima, além de outros FormGroup.

Obs.: FormArray e FormGroup também podem receber validadores, tal como o FormControl, mas, particularmente, nunca precisei usá-los e, para simplificar, não os abordarei.



import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  usuarioForm: FormGroup;

  ngOnInit() {
    this.usuarioForm = new FormGroup({
      "nome": new FormControl("João", [Validators.required]),
      "endereco": new FormControl(),
      "acesso": new FormGroup({
        "email": new FormControl(null, [Validators.required, Validators.email]),
        "senha": new FormControl(null, [Validators.required, Validators.minLength(3)])
      }),
      "telefones": new FormArray([])
    });
  }
}

Adicionando referências ao template

Os controles definidos no componente agora devem ser aplicados aos campos no template.

[formGroup]="usuarioForm" associa uma tag ao formulário criado.
formControlName aponta para um dos controles criados: "nome", "endereco", "email" e "senha".
formGroupName associa uma tag a um sub-grupo de dados, no caso, "acesso".



<form [formGroup]="usuarioForm" (ngSubmit)="enviar()">
  <h5>Cadastro de usuário</h5>

  <div class="form-row">
    <div class="form-group col-12">
      <label for="nome">Nome</label>
      <input type="text" name="nome" id="nome" class="form-control" formControlName="nome">
    </div>
  </div>

  <div class="form-row">
    <div class="form-group col-12">
      <label for="endereco">Endereço</label>
      <input name="endereco" id="endereco" class="form-control" formControlName="endereco">
    </div>
  </div>

  <div class="form-row" formGroupName="acesso">
    <div class="form-group col-12 col-sm-6">
      <label for="email">E-mail</label>
      <input type="email" name="email" id="email" class="form-control" formControlName="email">
    </div>

    <div class="form-group col-12 col-sm-6">
      <label for="senha">Senha</label>
      <input type="password" name="senha" id="senha" class="form-control" formControlName="senha">
    </div>
  </div>
</form>

Botão submit

O formulário poderia estar associado a uma tag div comum, ao invés de uma tag form.
Também não seria necessário utilizar o ngSubmit() para chamar a função de envio do formulário, isso poderia ser feito em um botão comum ou a qualquer momento da aplicação, já que o o componente tem controle total sobre o estado atual do formulário.
Ao final do formulário, foi adicionado um botão que é desabilitado quando o formulário é não válido, através do !usuarioForm.valid. É bom ter em mente que também há a propriedade invalid, que, pode passar a impressão de que ela fornecerá o resultado esperado, porém... o formulário também possui o estado PENDING, que não é válido, mas não é inválido e ocorre quando alguma validação assíncrona está sendo processada/aguardada. Logo, se usada a propriedade invalid, o botão seria habilitado quando o formulário estivesse PENDING, permitindo o usuário enviar um formulário possivelmente incorreto!
Considerando isso, o botão ficou da seguinte forma:



<button type="submit" class="btn btn-primary mt-3"  [disabled]="!usuarioForm.valid">Enviar</button>

Validações

Inspecionando os elementos, é possível observar que o Angular adiciona algumas classes aos inputs para identificar quem foi tocado e quem está inválido, por exemplo:

É comum usar isso para mudar o CSS dos campos inválidos.
Ao CSS do componente foi adicionado um estilo para que, quando os input estiverem inválidos e estiverem sido tocados, a cor da borda seja alterada para vermelho.



input.ng-invalid.ng-touched {
    border-color: red;    
}

Também foram adicionados alertas para senha inválida, e-mail inválido e para quando o grupo de acesso tiver algum controle inválido.



<div class="col-12" *ngIf="senhaInvalida">
  <div class="alert alert-danger" role="alert">
    <strong>Senha inválida!</strong>
  </div>
</div>

<div class="col-12" *ngIf="emailInvalido">
  <div class="alert alert-danger" role="alert">
    <strong>Informe um e-mail válido!</strong>
  </div>
</div>

<div class="col-12" *ngIf="acessoInvalidos">
  <div class="alert alert-danger" role="alert">
    <strong>Dados de acesso inválidos!</strong>
  </div>
</div>

Os ngIf acessam as seguintes propriedades do componente:



get emailInvalido() {
  return !this.usuarioForm.get('acesso.email').valid
    && this.usuarioForm.get('acesso.email').touched;
}

get senhaInvalida() {
  return !this.usuarioForm.get('acesso.senha').valid
    && this.usuarioForm.get('acesso.senha').touched;
}

get acessoInvalidos() {
  return !this.usuarioForm.get('acesso').valid
    && this.usuarioForm.get('acesso').touched;
}

FormArray de telefones

A implementação do FormArray consiste em demarcar onde ele começa através do uso da diretiva formArrayName apontando para o FormArray criado anteriormente, "telefone".
O array telefones será percorrido através do ngFor e, para cada elemento do FormArray telefones, um novo input será renderizado na tela, onde seu index será o seu identificador para o formControlName.
O método adicionarTelefone() será encarregado de adicionar novos elementos ao array.



<div class="row" formArrayName="telefones">
  <div class="col-12">
    <h4>
      Telefones
      <button type="button" class="btn btn-success ml-3" (click)="adicionarTelefone()">Adicionar</button>
    </h4>
    <div class="form-group mt-3" *ngFor="let telefone of telefones; let i = index">
      <label>Telefone {{i + 1}}</label>
      <input type="text" class="form-control" [formControlName]="i">
    </div>
  </div>
</div>

Em adicionarTelefone(), um novo controle é criado e adicionado ao array de telefones do usuarioForm. Observe que uma conversão para FormArray foi necessária: isso se deve ao fato de que o get() retorna um AbstractControl, que é herdado pelo FormArray, porém, não implementa o método push().



adicionarTelefone() {
  const control = new FormControl(null, [Validators.required, Validators.minLength(8)]);
  (<FormArray>this.usuarioForm.get("telefones")).push(control);
}

Já a propriedade telefones simplesmente retorna a lista de controles adicionados ao FormArray.



get telefones() {
  return (<FormArray>this.usuarioForm.get("telefones")).controls;
}

Pré-definindo valores do formulário

Existem dois métodos para preencher o formulário e eles possuem uma sutil diferença:

setValue(), ao qual devem ser fornecidos dados para TODOS os campos do formulário.
patchValue(), ao qual você pode preencher parcialmente o formulário e, os dados que já nele estiverem, se não forem passados ao método, permanecerão intocados.

No topo do formulário, foram criados botões para testar o comportamento. Reparem que para o setValue(), se telefones tiverem sido adicionados, um erro é emitido no console.
Como os métodos recebem objetos de qualquer tipo, nada te impediria de passar um objeto instanciado anteriormente, desde que atenda aos requisitos.
A implementação ficou da seguinte forma:



preencherComPatchValue() {
  this.usuarioForm.patchValue({
    "nome": "Felipe dos Santos Carvalho",
    "acesso": {
      "email": "contato@felipecarvalho.net"
    }
  });
}

preencherComSetValue() {
  this.usuarioForm.setValue({
    "nome": "Felipe dos Santos Carvalho",
    "endereco": "Rua Um",
    "acesso": {
      "email": "contato@felipecarvalho.net",
      "senha": "senha"
    },
    "telefones": []
  });
}

Limpando o formulário

Também foi criado um botão para limpar o formulário que simplesmente faz uma chamada ao método reset(). Dependendo da necessidade da sua aplicação, talvez você também possa precisar de alguns desses controles:

markAsUntouched(), que retorna ao estado de que o usuário não passou por nenhum campo (não focou).
markAsPristine(), que retorna ao estado de que o usuário não modificou nenhum campo - não forneceu nenhum valor.



  limpar() {
    this.usuarioForm.reset();
  }

Tratando dados antes de enviar ao servidor

Como nos Reactive Forms, não associamos um modelo ao formulário, temos as seguintes opções: trabalhar com o dado bruto, obter o valor campo a campo ou fazer alguma conversão para um modelo idêntico ao criado.
No enviar() foi demonstrado algumas possibiliaddes de trabalhar com os dados:



enviar() {
  console.log(this.usuarioForm.value);

  this.usuarioModel = Object.assign(this.usuarioForm.value);
  console.log(this.usuarioModel);

  this.usuarioModel = <Usuario>this.usuarioForm.value;
  console.log(this.usuarioModel);

  const nome = this.usuarioForm.get("nome").value;
  console.log(nome);
}

Detectando mudanças de valores e estado

As mudanças podem ser detectadas ao nos inscrevermos nos observables valueChanges, para valores e statusChanges para estado.
Foram criados contadores e variáveis para receberem os valores pelos observables retornados.
O valueChanges conta com um plus: foi adicionado um operador rxjs para que a função dentro do subscribe só seja executada 2 segundos após nenhuma nova alteração for detectada. Isso pode ser interessante para a implementação de um auto-save ou filtros a serem executados ao digitar.



this.usuarioForm.valueChanges
  .pipe(debounceTime(2000))
  .subscribe((valor) => {
    this.countMudancaValor++;
    this.ultimaMudancaValor = valor;
  });

this.usuarioForm.statusChanges
  .subscribe((status) => {
    this.countMudancaStatus++;
    this.ultimaMudancaStatus = status;
  });

Vamos ver funcionando?

Aproveitei e adicionei alguns outros campos para servir de base para auumentar um pouco a complexidade.
Recomendo que abra em uma nova aba para ter uma melhor experiência. Faça isso clicando aqui.

Criando uma *diretiva estrutural de repetição

Felipe Carvalho — Tue, 09 Jul 2019 14:57:17 +0000

Diretivas estruturais são "aquelas com asterisco", responsáveis por manipular o DOM, adicionando, removendo ou alterando elementos, tal como o *ngIf ou o *ngFor.

Há algum tempo tive a necessidade criar um componente onde eu precisaria repetir um mesmo elemento um certo número de vezes. Com as diretivas nativas, a única maneira de fazê-lo seria criando um array vazio e percorre-lo com *ngFor, mas essa solução não me agradou e então surgiu a oportunidade de criar uma diretiva estrutural para receber apenas o número de vezes que ela deva repetir o elemento.

Mas o que é o asterisco?

Na verdade, o asterisco antes da diretiva estrutural pode ser entendido como
uma abstração da implementação de um ng-template. Então, quando usamos uma diretiva estrutural:

<div *ngIf="hero" class="name">{{hero.name}}</div>

O Angular traduz para:

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

Resumo

A diretiva terá um atributo Input com o mesmo nome de seu seletor definido como set para que, ao setá-lo com o número de repetições, executemos a lógica para adicionar elementos ao TemplateRef recebido pelo construtor, utilizando o método createEmbeddedView() do ViewContainerRef.

Construção

Como vimos anteriormente, nossa diretiva estrutural é traduzida para um template e podemos receber esse template pelo construtor da nossa diretiva repetir, assim como o container onde nosso elemento está:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[repetir]'
})
export class RepetirDirective {
  constructor(private templateRef: TemplateRef<any>,
    private containerRef: ViewContainerRef) { }
}

Defini então um Input com o mesmo nome da diretiva, o que torna possível usá-la passando o valor (*repetir="2", por exemplo).
Defini então o set deste Input para executar uma lógica assim que o valor for recebido pela diretiva. Esta lógica consiste em criar cópias do meu template (elemento onde apliquei a diretiva) dentro do seu próprio container.
Como segundo argumento do createEmbeddedView() defini uma propriedade chamada posicao que poderá ser acessada pelo template do componente que usar a diretiva.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[repetir]'
})
export class RepetirDirective {
  @Input() set repetir(vezes: number) {
    for (let i = 0; i < vezes; i++) {
      this.containerRef.createEmbeddedView(this.templateRef, { posicao: i + 1 });
    }
  }

  constructor(private templateRef: TemplateRef<any>,
    private containerRef: ViewContainerRef) { }
}

Não podemos nos esquecer de colocar a diretiva nas declarations do nosso módulo:

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, RepetirDirective, NomeComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Agora, basta usar em algum template de algum componente. Repare que defini posicao as pos e exibi qual a posição daquela cópia:

<p *repetir="4; posicao as pos">
    Parágrafo {{pos}}
</p>

E funciona para componentes personalizados também:

  <app-nome *repetir="2; posicao as pos" (nomeEmitido)="nomeRecebido($event, pos)">    
  </app-nome>

Nada melhor que ver funcionando, certo?

O exemplo construído se encontra logo abaixo, mas se você não estiver conseguindo visualizar, ou caso prefira, pode clicar aqui para visualizar em outra aba.

Referências

Structural Directives

BehaviorSubject para comunicação entre componentes

Felipe Carvalho — Fri, 05 Jul 2019 17:34:49 +0000

As maneira mais simples de trafegar dados entre componentes é utilizando inbound property (@Input) e EventEmitter (@Output). Muitas vezes isso é suficiente, porém, podemos passar por alguns problemas:

E se quiséssemos alterar o dado da variável que estamos passando via inbound property? Teríamos que renderizar o componente novamente?
E se quiséssemos executar alguma lógica quando detectarmos alteração no valor?
E se o componente filho alterar esse dado? A única alternativa é criar um "caminho de volta" para avisar o componente pai?
Será que existe uma forma de manter uma fonte centralizada desse dado caso vários componentes precisem dele?

Uma das alternativas que temos para solucionar esses problemas é fazendo uso do BehaviorSubject ao invés de passar propriedades comuns para outros componentes. Seu funcionamento lembra o EventEmitter, mas trata-se de um Observable que sempre será instanciado e inicializado com um valor. Poderemos passar este BehaviorSubject para outros componentes via inbound property ou centralizá-lo em um serviço responsável pela comunicação, dessa forma, vários componentes poderão se inscrever(subscribe) nessa fonte de dados e manterem-se atualizados do seu último valor.

Resumo

Em um componente pai ou serviço, devemos criar e instanciar um BehaviorSubject que será disponibilizado para outros componentes ou serviços. Novos valores são enviados ao BehaviorSubject através do método next(). Com o subscribe(), podemos detectar quando houve alterações. Podemos obter o valor atual durante o próprio subscribe() e passá-lo a alguma variável ou acessando a propriedade value do BehaviorSubject: nomeBehaviorSubject.value. Também podemos exibir o valor no template html utilizando a pipe async: nomeBehaviorSubject | async.

Na prática

Explicarei sucintamente seu uso e no final disponibilizarei um exemplo funcional, como de praxe. Além do componente principal, terei outros dois componentes, um para emitir valores e outro para exibi-los:

BehaviorSubject via inbound property

O app.component é o nosso "componente pai", que será responsável por criar a instancia do BehaviorSubject que será passada para os componentes filhos:



export class AppComponent {
  nomeBehaviorSubjectPai= new BehaviorSubject<string>("Felipe");
}

Teremos então 2 componentes filhos, emissor.component e visualizador.component. Ambos receberão o nomeBehaviorSubjectPai via inbound property.
Definimos um Input para ambos. Não há necessidade de instanciar o BehaviorSubject como feito no app.component:



@Input() nomeBehaviorSubject: BehaviorSubject<string>;



<div class="row">
  <div class="col-6 border">
    <app-emissor class="m-1" [nomeBehaviorSubject]="nomeBehaviorSubjectPai"></app-emissor>
  </div>
  <div class="col-6 border">
    <app-visualizador class="m-1" [nomeBehaviorSubject]="nomeBehaviorSubjectPai"></app-visualizador>
  </div>
</div>

Em emissor.component, mandaremos um novo valor ao nomeBehaviorSubject através do método next(), para isso, criei o método abaixo, que será acionado pelo template:



  enviarViaInput(nome: string) {
    this.nomeBehaviorSubject.next(nome);
  }

Dessa forma já conseguimos acessar o valor diretamente pelo BehaviorSubject recebido pelo nosso visualizador.component. Fiz isso em seu template, conforme código abaixo:
Obs.: não é a única maneira de exibir o valor



<div class="col-12">
  Valor: {{nomeBehaviorSubject | async}}
  <br>
  Recebido {{nomeCount}} vez(es).
</div>

Observe que também estou exibindo o nomeCount. Também podemos nos inscrever ao nomeBehaviorSubject, receber o valor emitido e executar alguma lógica. No caso, apenas estou contando a quantidade de valores que foram recebidos:



  ngOnInit() {
    this.nomeBehaviorSubjectSubscription = this.nomeBehaviorSubject.subscribe(valor => {
      this.nomeCount++;
    });
  }

BehaviorSubject via service

Seu uso será semelhante ao exemplo anterior, porém com um service criando a instancia do BehaviorSubject, no caso, o app.service, com alguns métodos para passar um novo valor e obter o BehaviorSubject:



export class AppService {
  private musicaServiceBehaviorSubject = new BehaviorSubject<string>(`Dio - Egypt`);

  constructor() { }

  alterarMusica(valor: string) {
    this.musicaServiceBehaviorSubject.next(valor);
  }

  obterMusica() {
    return this.musicaServiceBehaviorSubject;
  }
}

O emissor.component receberá o service por injeção e poderá passar um novo valor através do método alterarMusica()



constructor(private appService: AppService) { }

enviarViaService(musica: string) {
  this.appService.alterarMusica(musica);
}

Da mesma forma, o visualizador.component também recebe o service por injeção e faz uso do subscribe do BehaviorSubject para executar uma lógica:



ngOnInit() {  
  this.musicaSubscription = this.appService.obterMusica()
    .subscribe(valor => {
      this.musicaCount++;
    });
}

Também criei um método get musica() para acessar o valor do template. O get nos permitirá acessar musica como se fosse uma variável comum de nosso componente, conforme demonstrado:



get musica(): string {
  return this.appService.obterMusica().value;
}



<div class="row">
    <div class="col-12">
        <h4>Via service</h4>
    </div>
    <div class="col-12">
        Valor: {{musica}}
        <br>
        Recebido {{musicaCount}} vez(es).
    </div>
</div>

Vamos ver funcionando?

Recomendo abrir em uma nova aba.

Caso queira abrir em nova aba ou não tenha conseguido visualizar o embedded, clique aqui.

Observe que fiz questão de dar um unsubscribe() nos BehaviorSubjects. Caso não tenha visto meu post anterior, nele demonstro a importância disso:
Observables: cancelar inscrição (unsubscribe) é importante!

Observables: como funcionam?

Felipe Carvalho — Mon, 24 Jun 2019 17:07:32 +0000

Introdução

Observable é uma funcionalidade da biblioteca rxjs, que é utilizada internamente pelo framework e já é instalada quando você cria uma nova aplicação Angular. Com Observables, conseguimos lidar com transferência de dados assíncrona. Muitas vezes, seu uso é semelhante ao de Promises do Javascript, porém, podendo ser uma fonte de transferência de dados contínua, ou seja, o Observable poderá emitir dados várias vezes em momentos distintos de sua existência.

Uso

Seu uso consiste em basicamente se inscrever (subscribe) à um Observable, informando o que deverá ser feito com o dado que irá receber. Essa inscrição poderá escutar 3 interações: sucesso, erro e completo (encerrado). Podemos informar no próprio subscribe, via parâmetro, as funções que devem ser executadas quando alguma dessas interações ocorrerem, sendo somente função de sucesso obrigatória.

É importante ter em mente que ao emitir um erro, o Observable sempre encerrará sua execução, podendo passar algum dado. Ao completar, ele apenas encerra a execução, sem passar nenhum dado para os inscritos, apenas os informa que ele completou seu ciclo.

Podemos nos inscrever ao mesmo Observable mais de uma vez e em vários pontos da aplicação, tornado-os uma excelente alternativa para comunicação entre componentes, o que recomendo ser feito com usando Subject ou BehaviorSubject, que derivam de Observables e têm rápida implementação. Deixarei para abordá-los em outro post.

Resumo

Resumidamente, com um Observable podemos:
• Receber dados várias vezes e em vários momentos
• Nos inscrever para receber dados de um mesmo Observable em vários pontos da aplicação
• Executar alguma operação quando o dado for recebido com sucesso
• Executar alguma operação quando emitir erro
• Executar alguma operação quando completar

Exemplo

Não é tão comum criar Observables “puros”, mas acredito que seja a melhor maneira para entender o seu funcionamento. Detalharei um pouco cada trecho do código e logo após disponibilizarei um exemplo funcional no stackblitz.

No Observable, defini o observador responsável por emitir algum dado para todos os inscritos, observadores, através do método next().

  novoObservable(): Observable<string> {
    return new Observable<string>(observador => {
      setTimeout(() => {
        observador.next("Primeiro timeout");
      }, 2000);

      setTimeout(() => {
        observador.next("Segundo timeout");
      }, 3000);

      setTimeout(() => {
        observador.next("Terceiro timeout");
      }, 5000);

      setTimeout(() => {
        observador.next("Quarto timeout");
      }, 4000);
    });
  }

Para receber os dados do Observable é necessário se inscrever nele através do método subscribe(). No ngOnInit() do meu componente, me inscrevi no Observable criado anteriormente, passando como parâmetro as funções de sucesso, erro e encerramento. Basicamente, irei adicionar a uma lista os resultados emitidos para exibi-la na tela. Chamamos isso de uma Subscription.

  ngOnInit() {
    const observable = this.novoObservable();

    this.inscricaoObservable = observable.subscribe(
      valor => {
        this.valoresRecebidos.push(valor);
      },
      erro => {
        this.valoresRecebidos.push(erro);
      },
      () => {
        this.valoresRecebidos.push("O observable foi encerrado!");
      });
  }

Além do método next(), temos o error(), ao qual, no exemplo abaixo, passo uma mensagem de erro que, da mesma forma que passo dados através do next(), o Observable a emitirá à todos observadores.

Disparei um erro no Segundo timeout, o que irá interromper o Observable antes de emitir o Terceiro e Quarto timeouts. Isso acionará a segunda função que passamos por parâmetro na nossa Subscription, adicionando o resultado "Erro no observable!" à nossa lista de valores recebidos.

  novoObservable(): Observable<string> {
    return new Observable<string>(observador => {
      setTimeout(() => {
        observador.next("Primeiro timeout");
      }, 2000);

      setTimeout(() => {
        observador.next("Segundo timeout");
        observador.error("Erro no observable!");
      }, 3000);

      setTimeout(() => {
        observador.next("Terceiro timeout");
      }, 5000);

      setTimeout(() => {
        observador.next("Quarto timeout");
      }, 4000);
    });
  }

Por fim, o observador também disponibiliza o método complete(), que aciona a terceira função que passamos por parâmetro, encerrando o Observable no mesmo instante, porém, sem passar nenhuma informação. O valor a ser inserido na lista de valores foi definido na própria função.

  novoObservable(): Observable<string> {
    return new Observable<string>(observador => {
      setTimeout(() => {
        observador.next("Primeiro timeout");
      }, 2000);

      setTimeout(() => {
        observador.next("Segundo timeout");
        observador.complete();
      }, 3000);

      setTimeout(() => {
        observador.next("Terceiro timeout");
      }, 5000);

      setTimeout(() => {
        observador.next("Quarto timeout");
      }, 4000);
    });
  }

Veja funcionando:

Para testar o exemplo, talvez seja necessário atualizar o navegador que ele disponibiliza. Remova os os trechos comentados (Ctrl K, U) da criação do Observable e repare que quando um error() ou complete() são acionados, o Observable é interrompido e não emite todos os dados. Experimente também remover as funções que passamos por parâmetro para o Observable, deixando apenas a de sucesso (primeira).

Caso não consiga ver o embedded, clique aqui.

Cancelar inscrição!

Repare que também criei a variável chamada Subscription no exemplo anterior. Se desinscrever dos Observables é uma boa prática que deve não deve ser esquecida!
Mais detalhes neste post: Observables: Cancelar inscrição (unsubscribe) é importante!

Observables: cancelar inscrição (unsubscribe) é importante!

Felipe Carvalho — Mon, 24 Jun 2019 17:06:29 +0000

Não se esqueça de cancelar o subscribe dos Observables!

Quando nos inscrevemos em um Observable, continuamos escutando-o, mesmo depois de abandonarmos o componente que o criou. Isso ocorre mais comumente quando criamos nossos próprios Observables e não nos providos pelo Angular, porém, até para esses é uma boa prática sempre nos desinscrevermos dos Observables no ngOnDestroy().

No exemplo deste post criei 2 links que navegarão entre dois componentes: com-observable e sem-observable.

No componente com-observable, estou usando a função interval do rxjs, que cria um Observable que incrementa e emite um número num intervalo de tempo determinado. Me inscrevi neste Observable e os números emitidos serão exibidos no console do stackblitz(na barra inferior, expanda-o), no componente sem-observable, apenas exibo um texto informando onde estamos.

Perceba que quando navegamos para o componente sem-observable, valores continuam sendo exibidos no console! Se voltamos para o componente com-observable, temos 2 observables emitindo resultados para o console! E novos observables serão acumulados a medida que saímos e entramos novamente no componente com-observable!

Podemos concluir que nossa aplicação pode emitir resultados inesperados, ficar muito lenta ou até mesmo quebrar por conta disso. Por esse motivo é fundamental criar uma variável para armazenar a inscrição e desinscrever-se no ngOnDestroy().

Agora, no componente com-observable, experimente remover o código comentado do ngOnDestroy() e experimente novamente navegar entre os componentes e veja que as inscrições não se acumulam mais!
Obs: talvez seja necessário atualizar o navegador do stackblitz.

Caso não consiga ver o embedded, clique aqui.

Instalando Bootstrap em uma aplicação Angular (com ngx-bootstrap)

Felipe Carvalho — Tue, 18 Jun 2019 13:54:05 +0000

Instale o pacote do bootstrap, via npm:

npm i bootstrap --save

Terminado o download, o bootstrap deverá constar nas dependencies de seu package.json e você conseguirá localizá-lo na sua pasta node_modules.
Agora, basta adicionar o CSS do pacote baixado em seu angular.json, dentro da seção styles, conforme código abaixo:

{
  "projects": {
    "nome-do-projeto": {
      ...
      "architect": {
        "build": {
          ...
          "styles": [
            "node_modules/bootstrap/dist/css/bootstrap.min.css",
            "src/styles.scss"
          ]
        }
      }
    }
  } 
}

Com isso você já pode usar praticamente tudo que o bootstrap oferece, exceto os componentes um pouco mais complexos, que utilizam JQuery, como o collapse, o dropdown e o carousel, por exemplo.
Como o Angular já é o responsável por manipular o DOM e faz inúmeros verificações nele durante a execução, não é uma boa prática adicionar o JQuery para o mesmo fim, pois isso poderia, inclusive, quebrar a aplicação caso o Angular armazene um estado de algum elemento e o JQuery o modifique sem "comunicar" o Angular.
Infelizmente, o bootstrap não disponibiliza nenhuma biblioteca oficial para trabalhar com o Angular, porém temos 2 alternativas:

ngx-bootstrap
ng-bootstrap Como prefiro a documentação do ngx-bootstrap e nunca tive problema com o mesmo, acabo sempre optando por ele, logo, o usarei como exemplo:

Instale o pacote ngx-bootstrap:

npm i ngx-bootstrap --save

Agora basta importar os módulos referentes ao componente que deseja usar ao seu app.module ou algum outro módulo da sua aplicação e usar as diretivas.
Como dito anteriormente, gosto muito da documentação do ngx-bootstrap, então recomendo lê-la para entender como usar o que ela disponibiliza. De qualquer forma, segue uma explicação de como criar um dropdown, baseado num exemplo da própria documentação do ngx-bootstrap:

Adicione o módulo de dropdown ao app.module da aplicação:

import { BsDropdownModule } from 'ngx-bootstrap';

@NgModule({
  imports: [
 BsDropdownModule.forRoot(),
 ...
  ]
})
export class AppModule(){}

Adicione a diretiva dropdown à div que irá conter seu dropdown.
Adicione a diretiva dropdownToggle ao botão.
Adicione a diretiva (estrutural, com asterísco) *dropdownMenu ao seu menu.

Demonstração de uso das diretivas abaixo:

<div class="btn-group" dropdown>
  <button id="button-basic" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
          aria-controls="dropdown-basic">
    Button dropdown <span class="caret"></span>
  </button>
  <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-basic">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

Pronto! O dropdown deve estar funcionando corretamente e sua aplicação preparada para usar bootstrap!