1
I have a code where a list of plans is displayed that an academy has, when clicking on one, opens a page where it chooses whether it will be (Time: quarterly, half-yearly or annual), and selects the modality (if it acts), as:
- Plano: Martial Arts
- Modalities: Jiu-jitsu, Self-defense, Muay thai and etc...
To choose time I opted for a Radio button and mode a checkbox.
When the person clicks on buy, goes to the purchase screen where the user will enter the data on it, card and etc...
My question is how best I pass the data of what the user chose as time and mode to the shopping page, how to traffic this data?
Page code:
page.plano.ts
public planoId;
private planoDados;
vigencia: number;
modalidades: any[] = [];
limiteModalidades: number;
modalidadesEscolhidas: any[] = [];
modalidadesObrigatorias: any[] = [];
numeroModalidadesObrigatorias: number;
constructor(
private planoService: PlanoService,
private router: Router,
private activatedRoute: ActivatedRoute
) {
this.activatedRoute.params.subscribe(params => (this.planoId = params.id));
}
ngOnInit() {
this.planoService.receberPlano(this.planoId).subscribe(response => {
this.limiteModalidades = parseInt(response.Itens[0].PlanoModalidadeSelecaoLimite, 10);
this.planoDados = response.Itens[0];
response.Itens[0].PlanoModalidades.forEach(i => {
this.modalidades.push(i)
})
this.modalidadesObrigatorias = response.Itens[0].PlanoModalidades.filter((obg) => {
return obg.PlanoModalidadeObrigatoria === '1'
})
console.log(this.modalidadesObrigatorias)
this.numeroModalidadesObrigatorias = this.modalidadesObrigatorias.length
this.modalidadesObrigatorias.forEach(i => {
this.modalidadesEscolhidas.push(i.PlanoModalidadeID)
});
this.numeroPlanosAEscolher = this.limiteModalidades - this.modalidadesEscolhidas.length
});
}
valorVigencia(vigencia) {
this.vigencia = vigencia
}
addModalidade(i) {
let index = this.modalidadesEscolhidas.indexOf(i)
if (this.modalidadesEscolhidas.length >= this.limiteModalidades) {
this.checkboxErro = true;
} else {
this.checkboxErro = false;
}
if (index === -1) {
this.modalidadesEscolhidas.push(i)
} else {
this.modalidadesEscolhidas.splice(index, 1)
}
}
validar(){
if (this.vigencia && this.modalidadesEscolhidas.length === this.limiteModalidades) {
this.router.navigateByUrl(`./comprar/${this.planoId}/${this.vigencia}/${this.modalidadesEscolhidas}`)
} else {
console.log('Merda')
}
}
}
page.plano.html
<div>
<label class="btn btn-outline-success col teste">
<input #radioBox
type="radio"
name="options"
(click)="valorVigencia(radioBox.value)"
[value]="v.ItemValorID"
/>
<span class="lead">
{{ v?.ItemValorQuantidade | frequenciaParaRecorrencia }}
<div>
{{ v?.ItemValorQuantidade }}x de
{{ v?.ItemValorPreco / v?.ItemValorQuantidade | currency: "BRL" }}
</div>
</span>
</label>
<div *ngFor="let modalidade of modalidades; let i = index">
<label class="btn btn-outline-success col teste">
<input #checkbox
type="checkbox"
[name]="modalidades"
[value]="modalidade.PlanoModalidadeID"
(change)="addCheckbox(checkbox.value)"
[checked]="modalidade.PlanoModalidadeObrigatoria === '1'"
[disabled]="modalidade.PlanoModalidadeObrigatoria === '1'"
/>
<span class="lead">
{{ modalidade?.PlanoModalidadeDescricao }}
</span>
</label>
</div>
I just need to move to the purchase page the plan id planoId: number
, time: vigencia: number
and modalities: modalidadesEscolhidas: string[]
Help me!! If you think I need to improve the question let me know.
Voce can use ngrx or a behaviorsubject
– Eduardo Vargas