Issue with component in ngFor

Question

I have an issue with creating ngFor with a component, that will show up when user will click on it. So far I have the following:

<div class="col-xs-3 col-xs-offset-1" (click)="viewProduct(product)" *ngFor="let product of products; let i = index">
    <img [src]="product.picture"/>
</div>

<product-zoom *ngIf="product" [(product)]="product"></product-zoom>

Where:

products = Products[];
viewProduct(value) <- sets this.product = value

Which works in the way that: user click on of the images on in the ng-for (3 per row), and then in the product-zoom component, the image of that product is displayed.

This works fine when there are less than 6 products displayed - in case when there are more products, the product zoom component is on the bottom of the page, and user cannot see it - he has to scroll to get to it.

I am wondering, how can I create the component every 3rd product in ngFor, and how can I connect click (pretty much assign this.product to a proper component) to the given product-zoom component?

Answer 1

I think it's best to only have one product-zoom component on your page, but make the CSS so, that it gets displayed as an overlay.

styles: [`
    :host {
        position: absolute;
        width: 500px;
        height: 500px;
        left: 50%;
        top: 50%;
        margin-left: -250px;
        margin-top: -250px;
    }
`]