Showing another component inside dynamic repeat.for list

Help Requests
1

Hi, I found a neat idea for opening a ‘detail view’ from listing view from a site called 4dayweek.io.

Little demo as a GIF aswell, since the site may get changed at some point:
example3

So the basic idea would be that you have a (unknown) amount of listings in a product list and you would be able to open the detail-view (another component) of the listing right in the list without navigating to a new route.

I tried to make it work using Aurelia, and here is some abstract code of what I’ve tried so far:

// product.html
<template repeat.for="item of products">

    <div class="product-tile" click.trigger="openProductDetail(item.id)">

        <div class="product-image">
            <img width="100%" src="../../../static/prod1.jpg"> 
        </div>
        
        <div class="product-title">
            <h2>
                <span>${item.title}</span> 
            </h2>
        </div>

        <div class="product-info">
            <p>${item.info}</p>
        </div>

    </div>

    <div if.bind="item.id == detailId" class="product-detail">
        <product-detail model.bind="item.id"></product-detail>
    </div>

</template>

// products.ts
export class Products {
    products: IProduct[];
    detailId: number = 0;
    
    constructor(private productService: ProductService) {}

    async attached() {
        this.products =  await this.productService.getProducts();
    }

    private openProductDetail(id: number){
        if(this.detailId == id){
            this.detailId = 0;
        } else {
            this.detailId = id;   
        }
    }
}

With this solution I made partial success since I was only able to ‘open’ one product detail-view at a time, because only one instance of if.bind="item.id == detailId" can be true in repeat.for="item of products"

My mind is throwing blanks at this point about how to extend this logic and to make it work like in the website that I provided in the beginning of the post.

I’m probably missing some key knowlege or just something obvious so hopefully someone can offer me some pointers to try out :slight_smile:

2

Hi!.
First thing, I would extend the IProduct interface and add a expand boolean property so that for each product it can be set to true.
With that, the product-detail component like this:

<product-detail model.bind="item" if.bind="item.expand"></product-detail>

Good luck

2 Likes
3

Awesome, thanks for your quick answer! Your tip makes so much sense! Now I feel a bit dissapointed that I didn’t come up with it myself :sweat_smile:

I love this friendly community :heart:

1 Like