Expand/Collapse ngFor data upon clicking a button

Question

Expand/Collapse ngFor data upon clicking a button

I am facing an issue with toggling the display of ngFor data. I want to initially show one record and then reveal the rest when the "See more" button is clicked. However, I do not want the previously shown records to be automatically hidden. Currently, opening a new itinerary automatically closes the previous one. Can anyone help me out with this? Below is the components file.

<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>

Here is the click function in ts file.

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';
} }

https://i.sstatic.net/TwsRP.png

angular typescript angular8

Answer 1

Answer №1

If you need to manage a list of items, it's important to use an array instead of just a single variable. Define an array like this:

more: boolean[] = []

Additionally, when changing the text in the HTML, avoid using something as unusual as

event.currentTarget.parentElement.children[0].innerText = 'See More'

. Instead, consider using the "angular way" like this:

<p (click)="more[i] == !more[i]" class="seeMore">
    {{more[i] ? 'See Less' : 'See more'}}
</p>

Lastly, replace your

`selectedIndex === i` with `more[i]`

Answer 2

If you need to manage a list of items, it's important to use an array instead of just a single variable. Define an array like this:

more: boolean[] = []

Additionally, when changing the text in the HTML, avoid using something as unusual as

event.currentTarget.parentElement.children[0].innerText = 'See More'

. Instead, consider using the "angular way" like this:

<p (click)="more[i] == !more[i]" class="seeMore">
    {{more[i] ? 'See Less' : 'See more'}}
</p>

Lastly, replace your

`selectedIndex === i` with `more[i]`

Answer 3

Answer №2

If you want to ensure smooth updates when dealing with changes, consider implementing the 'trackby' concept in your code. This will help track previous changes and seamlessly incorporate any new ones.

<...*ngFor="let item of items; trackBy:trackByIdentity">

Make sure to add the following method inside your .ts file:

trackByIdentity(index, item){
     return item.<unique_attribute_here>; 
}

Answer 4

If you want to ensure smooth updates when dealing with changes, consider implementing the 'trackby' concept in your code. This will help track previous changes and seamlessly incorporate any new ones.

<...*ngFor="let item of items; trackBy:trackByIdentity">

Make sure to add the following method inside your .ts file:

trackByIdentity(index, item){
     return item.<unique_attribute_here>; 
}

Answer 5

Answer №3

In situations like these (even though it may seem like a simple solution, I haven't been able to think of anything better), what I typically do is include a specific value in each object within your iterable that indicates whether that item should have an active class or not. In this scenario, as you retrieve youeventList.tourevents, you can map through it and add something like (isActive = false) to each object, then link that value to the class of each item in your ngFor loop.

Therefore, when you click on the toggle button, simply pass the index of the ngFor item and update that value in your array - this will either add or remove the active class name for the selected item, without affecting the other items in your ngFor loop. Hopefully this explanation is clear; if necessary, I can provide example code in my response.

Answer 6

In situations like these (even though it may seem like a simple solution, I haven't been able to think of anything better), what I typically do is include a specific value in each object within your iterable that indicates whether that item should have an active class or not. In this scenario, as you retrieve youeventList.tourevents, you can map through it and add something like (isActive = false) to each object, then link that value to the class of each item in your ngFor loop.

Therefore, when you click on the toggle button, simply pass the index of the ngFor item and update that value in your array - this will either add or remove the active class name for the selected item, without affecting the other items in your ngFor loop. Hopefully this explanation is clear; if necessary, I can provide example code in my response.

Expand/Collapse ngFor data upon clicking a button

Answer №1

Answer №2

Answer №3

Similar questions

How can I showcase the captured image on Ionic 2?

Deploying an angular 5 application

What is the reason behind the NgForOf directive in Angular not supporting union types?

Completing a submission form in a separate module

Angular Service Worker enhancements across various domains

Why aren't functions included when casting from a JSON literal to a specific type?

In TypeScript, there is a mismatch between the function return type

What is the reason behind the narrowing of the type by indexing into a mapped type?

Using TypeScript to define attributes by merging specified attribute names with variable attribute names

Steps to adding an item to a TypeScript array

What is the best way to inform TypeScript that it is acceptable to reference an export that may or may not exist in the current revision of a module?

angular2 ngFor is not functioning properly

Sequencing animations with *ngIf in Angular 6

The metadata for [object Module] does not contain any ngModule information

Finding a way to reference multiple components within a mapping function

When using this.$refs in Vue, be mindful that the object may be undefined

Disable the default animation

Unconventional way of assigning class properties in Typescript (Javascript): '?='

How to Merge Items within an Array of Objects Using Typescript?

Is there a way to define one type parameter directly and another type parameter implicitly?