Показать больше/показать меньше данных ngFor при нажатии кнопки

У меня возникает проблема при отображении и скрытии данных ngFor. Я хочу показать одну запись по умолчанию, и когда кто-либо нажмет кнопку «Просмотреть больше», будет показана оставшаяся запись. Я не хочу автоматически закрывать предыдущие записи. В настоящее время предыдущее содержимое маршрута будет автоматически закрыто, когда я открою другой маршрут. Кто-нибудь, пожалуйста, помогите мне? Вот файл компонентов.

<div class="itineraryDay" *ngFor="let eventList of eventDailyItineraray; let i = index">
<div class="itineraryDay-header">
    <h5>Day {{i+1}}</h5>
    <p>{{eventList.tourevents[0]?.categoryName}}</p>
</div>
<div class="itineraryDay-detail">
    <div class="itinerary-cards">
        <mat-card class="mycard" *ngFor="let event of eventList.tourevents | slice:0:[selectedIndex === i ? max  : 1 ]; let j = index">
            <div class="day-activity d-flex">
                <div class="activity-img">
                    <img [src]="(event?.eventPic ? firstEventImage(event?.itemId,event?.eventPic):'./assets/media/icons/preview-item.svg')" />
                </div>
                <div class="activity-detail">
                    <div class="activity-detail-inner d-flex justify-content-between align-items-center">
                        <div class="activity-category d-flex">
                            <img src="{{categoryPic}}{{event?.categoryIcon}}" />
                            <span>{{event?.itemName}}</span>
                        </div>
                        <div class="activity-hours d-flex align-items-center justify-content-end">
                            <img src="./assets/media/icons/access_time-24px.svg" />
                            <span>{{durationCalculation(event?.duration)}} Hours</span>
                        </div>
                    </div>
                    <p>{{event?.description}}</p>
                </div>
            </div>
        </mat-card>
    </div>
    <div class="see-more">
        <div class="icon-inner">
            <p (click)="toggle(i, $event)" class="seeMore">See More</p>
            <div class="more-icon" (click)="toggle(i, $event)" [ngClass]="{'active': selectedIndex === i}" >
                <i class="flaticon-eye"></i>
            </div>
        </div>
    </div>
</div>

Вот функция щелчка в файле ts.

toggle(index, event){

this.max = this.eventDailyItineraray[index].tourevents.length;

if(this.selectedIndex === index){
  this.selectedIndex = -1;
  event.currentTarget.parentElement.children[0].innerText = 'See More';
}else{
  this.selectedIndex = index;
  event.currentTarget.parentElement.children[0].innerText = 'See Less';
} }