Showing another component inside dynamic repeat.for list

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

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

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

        <div class="product-image">
            <img width="100%" src="../../../static/prod1.jpg"> 
        <div class="product-title">

        <div class="product-info">


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

// 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=" == 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:

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


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