For my project, I am utilizing a stepper and I need to display or hide a div based on the selected product. However, I am encountering an issue where the HTML isn't updating when I try to call the done() function.
.service
public beneficiary = true;
public children = true;
changeProduct() {
if (localStorage.getItem("product") === 'ci') {
this.beneficiary = false;
}
if (localStorage.getItem("product") === 'life') {
this.children = false;
}
}
.parent
constructor(public stepService: StepService) { }
ngOnInit() {
this.stepService.changeProduct();
}
parent.html
<div class="filled" *ngIf="stepService.children">
...
</div>
<div class="filled" *ngIf="stepService.beneficiary">
...
</div>
.child
done(index: number) {
if (this.form.valid) {
this.stepService.changeProduct();
}
}