90
Hello All,
We have a requirement in which our client expects to display a session list as mentioned below
The List should display all events per day in two different lists
But what i achieved is below list all sessions are displayed only in one column
Could any one please help us on how to achieve desired output.
Regards
Abhilash
Thank you Clofly for your inputs. it is really helpful for us.
Hi Abhilash,
By default, sample event website has implemented a drop down list to aggregate sessions by their date and show sessions dynamically by date based on the selected option.
Therefore, you could just add some simple customization to make use of the existing code to extend functionality.
1. In sessions.component.html, insert the container containing custom contents after drop down list container.
Day {{index}}
As you can see, we will create a variable "index" in corresponding ts file to get index of the selected option and render it as number of day, and bind a custom function to OnChange event of the drop down list.
(In addition, there is a Boolean variable "showIndex" to control display of custom content.(By default, the variable is set to false.)
(change)='setDayIndex()'
2. In the ts, declare two custom variables.
index: number; showIndex: boolean = false;
At bottom of source code, add the custom function to assign index of the selected option to custom variable.
Share
Report
All responses (
Answers (
public setDayIndex():void {
this.showIndex = true;
this.index = this.dateKeys.findIndex(item => item === this.selectedDateKey) 1;
}
Test
Regards,
Clofly
#1
André Arnaud de Cal...
293,274
Super User 2025 Season 1
#2
Martin Dráb
231,939
Most Valuable Professional
#3
nmaenpaa
101,156
Moderator
