@for(data of aboutMenuList; track data){
<li (click)=“handleMenuActive(data?.id)”><a
[class]=“isSelected==data?.id ? ‘active’: ””>{{data?.title}}</a></li>
}
</ul>
<div class=“about-main-child-right”>
<app-about-us id=“0”></app-about-us>
<!– END! app-about-us –>
<app-about-our-values id=“1”></app-about-our-values>
<!– END! about-our-values –>
<app-about-our-partners id=“2”></app-about-our-partners>
<!– END! about-our-partners –>
<app-about-our-team id=“3”></app-about-our-team>
<!– END! about-our-team –>
<app-you-can-trust-us id=“4”></app-you-can-trust-us>
<!– END! you-can-trust-us –>
<app-about-our-story id=“5”></app-about-our-story>
<!– END! about-our-story –>
<app-about-where-we-operate id=“6”></app-about-where-we-operate>
<!– END! about-where-we-operate –>
</div>
{ id: 0, title: ‘About Us‘ },
{ id: 1, title: ‘Our Values‘ },
{ id: 2, title: ‘Our Partners‘ },
{ id: 3, title: ‘Our Team‘ },
{ id: 4, title: ‘Trust‘ },
{ id: 5, title: ‘Our Story‘ },
{ id: 6, title: ‘Where We Work‘ },
];
handleMenuActive(id: any) {
let element = document.getElementById(id);
if (element) {
// element.scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
const rect = element.getBoundingClientRect();
const offset = 100;
const scrollTop = window.pageYOffset + rect.top – offset;
window.scrollTo({
top: scrollTop,
behavior: ‘smooth‘
});
}
}
Alternative
@for(data of aboutMenuList; track data){
<li (click)=“handleMenuActive(data?.id)”><a
[class]=“isSelected==data?.id ? ‘active’: ””>{{data?.title}}</a></li>
}
</ul>
<div class=“about-main-child-right”>
<app-about-us id=“0”></app-about-us>
<!– END! app-about-us –>
<app-about-our-values id=“1”></app-about-our-values>
<!– END! about-our-values –>
<app-about-our-partners id=“2”></app-about-our-partners>
<!– END! about-our-partners –>
<app-about-our-team id=“3”></app-about-our-team>
<!– END! about-our-team –>
<app-you-can-trust-us id=“4”></app-you-can-trust-us>
<!– END! you-can-trust-us –>
<app-about-our-story id=“5”></app-about-our-story>
<!– END! about-our-story –>
<app-about-where-we-operate id=“6”></app-about-where-we-operate>
<!– END! about-where-we-operate –>
</div>
{ id: 0, title: ‘About Us‘ },
{ id: 1, title: ‘Our Values‘ },
{ id: 2, title: ‘Our Partners‘ },
{ id: 3, title: ‘Our Team‘ },
{ id: 4, title: ‘Trust‘ },
{ id: 5, title: ‘Our Story‘ },
{ id: 6, title: ‘Where We Work‘ },
];
handleMenuActive(id: any) {
let element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: ‘smooth‘, block: ‘start‘ });
}
}