Compartilhando abaixo minha implementação do desafio, fiz de uma forma um pouco diferente do professor, porém creio que esteja funcionando da mesma forma.
form-busca.service.ts
getDescricaoPessoas(pessoas: 'adultos' | 'crianças' | 'bebês'): string {
let descricao: string = "";
let qtd: number = this.obterValorControle(pessoas);
if(qtd > 1) {
descricao = qtd + " " + pessoas;
} else {
descricao = qtd + " " + pessoas.slice(0, -1);
}
return descricao;
}
somarDiminuirPessoas(somarDiminuir: 1 | -1, pessoas: 'adultos' | 'crianças' | 'bebês'): void {
const controle = this.obterControle(pessoas);
const valorAtual = controle.value || 0;
let novoValor;
if(pessoas === 'adultos') {
novoValor = Math.max(valorAtual + somarDiminuir, 1);
} else {
novoValor = Math.max(valorAtual + somarDiminuir, 0);
}
controle.setValue(novoValor);
}
obterControle(nome: string): FormControl {
const control = this.formBusca.get(nome);
if (!control) {
throw new Error(`FormControl com nome "${nome}" não existe.`);
}
return control as FormControl;
}
obterValorControle(nome: string): any {
return this.obterControle(nome).value;
}
modal.component.html
<mat-chip (click)="formBuscaService.openDialog()">
<div class="inner">
<mat-icon>check</mat-icon> {{formBuscaService.getDescricaoPessoas("adultos")}}
</div>
</mat-chip>
<mat-chip (click)="formBuscaService.openDialog()" *ngIf="formBuscaService.obterValorControle('crianças') > 0">
<div class="inner">
<mat-icon>check</mat-icon> {{formBuscaService.getDescricaoPessoas("crianças")}}
</div>
</mat-chip>
<mat-chip (click)="formBuscaService.openDialog()" *ngIf="formBuscaService.obterValorControle('bebês') > 0">
<div class="inner">
<mat-icon>check</mat-icon> {{formBuscaService.getDescricaoPessoas("bebês")}}
</div>
</mat-chip>
<mat-chip (click)="formBuscaService.openDialog()">
<div class="inner">
<mat-icon>check</mat-icon>
{{formBuscaService.obterValorControle("tipo")}}
</div>
</mat-chip>
form-busca.component.html
<div class="selecao-idade">
<ul>
<li class="pessoa-idade">Adultos</li>
<li>(Acima de 12 anos)</li>
<li>
<app-botao-controle
src="/assets/icones/do_not_disturb_on.png"
alt="Sinal de subtração"
tipo="decremento"
(click)="formBuscaService.somarDiminuirPessoas(-1, 'adultos')"
/>
<span>{{formBuscaService.obterValorControle("adultos")}}</span>
<app-botao-controle
src="/assets/icones/add_circle.png"
alt="Sinal de adição"
tipo="incremento"
cor="primary"
(click)="formBuscaService.somarDiminuirPessoas(1, 'adultos')"
/>
</li>
</ul>
<ul>
<li class="pessoa-idade">Crianças</li>
<li>(Entre 2 e 11 anos)</li>
<li>
<app-botao-controle
src="/assets/icones/do_not_disturb_on.png"
alt="Sinal de subtração"
tipo="decremento"
(click)="formBuscaService.somarDiminuirPessoas(-1, 'crianças')"
/>
<span>{{formBuscaService.obterValorControle("crianças")}}</span>
<app-botao-controle
src="/assets/icones/add_circle.png"
alt="Sinal de adição"
tipo="incremento"
cor="primary"
(click)="formBuscaService.somarDiminuirPessoas(1, 'crianças')"
/>
</li>
</ul>
<ul>
<li class="pessoa-idade">Bebês</li>
<li>Até 2 anos</li>
<li>
<app-botao-controle
src="/assets/icones/do_not_disturb_on.png"
alt="Sinal de subtração"
tipo="decremento"
(click)="formBuscaService.somarDiminuirPessoas(-1, 'bebês')"
/>
<span>{{formBuscaService.obterValorControle("bebês")}}</span>
<app-botao-controle
src="/assets/icones/add_circle.png"
alt="Sinal de adição"
tipo="incremento"
cor="primary"
(click)="formBuscaService.somarDiminuirPessoas(1, 'bebês')"
/>
</li>
</ul>
</div>