Every time the element in the child template is clicked, it triggers the method activateService(name) and emits an event with the name of the selected service using the event emitter serviceSelected. The parent component's method scrollDown(name) is then called to set the attribute serviceActive to true and scroll down to the element with the id='service-view' in the parent's template. However, there is an issue where I have to click the child element twice for the scrolling effect to be triggered in the parent component. It seems like the scroll trigger happens before the element in the parent's template becomes visible. I'm unsure how to conditionally trigger the scroll functionality only after the value of activeService has been set to true, meaning after the parent element is visible. Does anyone have a solution to this problem?
Child:
.ts:
@Output('service') serviceSelected = new EventEmitter<string>();
activateService(service: string) {
this.serviceSelected.next(service);
}
.html:
<div class="service" (click)="activateService('service1')">...</div>
Parent:
.ts:
serviceActive!: boolean;
scrollDown(evt: string) {
this.onServiceActivated();
document.getElementById("service-view")?.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest"
});
}
onServiceActivated() {
this.serviceActive = true;
}
.html:
<app-services (service)="scrollDown($event)"></app-services>
<!--Display only if serviceActive is true-->
<div id="service-view" *ngIf="serviceActive">
<app-services-detail></app-services-detail>
</div>