Scroll to ngFor angular item by clicking on another

Question

i have list of contacts divide in alphabetical categories and another section contains alphabetical letters , like this image (image will help to understand my question) contacts list

to do that i made contacts loop inside alphabetical loop and made another section with alphabetical loop, what i want to do is when click on v for example will scroll to view contacts section v i made function for that but it needs to pass target element how can i pass the letter to go to the same letter section

    <section  *ngFor="let char of chars;" ><!-- alphabetical array -->
        <div>{{char}}</div>
        <div *ngFor=" let contact of contacts|search:letter||char;"><!-- contacts list array -->
            <a href="#">
                <img [src]="contact.image">
            </a>
            <div>
                <h5>{{contact.firstName}} {{contact.lastName}}</h5>
                <p>{{contact.email}}</p>
            </div>
        </div>
    </section>
    <section><!-- alphabetical array for vertical section -->
        <div *ngFor="let char of chars;"  (click)="scrollCategory()">{{char}}</div>
    </section>
</section>

// This is scrolling function

scrollCategory(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
}