How to create a dynamic list of lists or carousels


I am new to Lightning and running into issues when dynamically creating a page full of lists, carousels, and other widgets with typescript. Essentially, I want to have a page’s layout be dynamic based on a response, meaning different lists and carousels and widgets with different data that are all scrollable. Would it be best to put these dynamic lists/carousels/widgets into a list that is a column direction? Or is there a better way to implement this?

What is the best way to dynamically supply a list/carousel/widget component with the items it will display? The documentation is lacking here (or I cannot find the right section), and I cannot seem to find a good solution to do this. For example, I have a several customized list and carousel components. How do I dynamically load content into them from another file that got the response? I cannot seem to do this in the template where it seems to want me to do it, and it seems that the other methods I am trying throws errors.

Just trying to learn best practices/how to use Lightning!



Check out the source code of:

Essentially, you want to get your dynamic data and convert it into Lightning objects and then patch it into the list. The Entity page (lightning-ui-tmdb/Entity.js at main · ComcastSamples/lightning-ui-tmdb · GitHub) has multiple rows of dynamic data that it loads in and then patches it to the UI:

set recommendations(items) {
    this._SectionsContainer.tag('Items.Recommendations').items = items;

I’m setting the recommendations via the Router here:

LMK if you have questions.


Hi @chiefcll, I have implemented the same and created a dynamic list of lists. I did instead like to know from you, how to manage the scrolling event. The focus is driven but I cannot scroll vertically to other row lists generated. Could you help me in resolving this issue? Thanks in advance for your help

A list with a vertical scroll.
Inner list with horizontal scroll.