Appending dynamic Component to ngFor list

Question

New to Angular 2/4 (Angular in general) and I'm trying to figure a way to append a component to an item in an ngFor list in which each item listed provides it's own component on click within the list.

I have two sibling component's. One that provides a grid list (exponentially long) of thumbnails using bootstrap called Thumbnail and I have a sibling component that uses interpolation to use the data from Thumbnail Component to display further information. I would like each thumbnail when clicked to display a component with its respective information not below the list, but in between it. I have looked around and saw a couple posts related to creating dynamic components with ComponentFactoryResolver and using @Viewchild and haven't I haven't been successful here.

I've been able to have the new View show below the list but that's not the idea behind the design.

To further complicate this I'd like the new View to be routed, so if one were to navigate to this new components View it will having its URL displayed on the top of the page at /#id. Or if someone were to visit the URL it will route to its destination as a new view within the thumbnail component.

Here's a photo describing how I've been trying to get it to function and I think it better explains what I'm getting at.

https://imgur.com/a/nDRHT

Any help on what I should be looking into would be fantastic. Thanks.

Have you tried making each of your thumbnails as repeated in the ngFor have a col-12 sized element that's defaulted to hidden, and shows on click? That way it would already be built inline and would display where you're expecting it to. — Joshua Ohana
You probably need to split your list into 2x8 and show the component inbetween. Nothing fancy needed. — kuhnroyal
@kuhnroyal I should have mentioned that the grid is actually much longer than 16 thumbnails and is continuously added to. Otherwise, you're right it's not as difficult as it would seem. — Brandon I
@JoshuaOhana from what I've read before using hidden isn't the ideal use case in these situations. I should add that the thumbnails will be constantly added to, like a gallery and will have much more than 16 items and could slow down the application if there were say 100 or more photos. — Brandon I
@BrandonI I'm not sure why you think it's not ideal ... if you already are generating 100s of dynamic components, making each one slightly larger doesn't much change anything. If you render conditionally with *ngIf they don't actually exist in the DOM and won't cause any page slowdown (only a few extra JS cycles). Honestly the more I think about it this is probably the best approach that comes to my mind. Maaaaybe you could do some kind of hacky component injection but I can't see any benefit of that approach. — Joshua Ohana

Joshua Ohana Joshua Ohana · Accepted Answer · 2017-09-05T17:07:21

Without seeing your code layout it's difficult to suggest an exactly solution, but based on our conversation in the thread above I think that the below will suffice as a good launching off point for you.

The idea would be to have your ngFor iterate across your thumbnails, and inside each of these thumbnail components would be a conditionally displayed banner which would be full width. This would in theory automatically display in the correct location without impact your site's performance much, if any.

<div *ngFor="let thumbnail of thumbnails">
    <my-thumbnail class="col-md-3" [thumbnailImage]="thumbnail.imgSrc"></my-thumbnail>
    <thumbnail-data class="col-md-12" *ngIf="thumbnail.showData"></thumbnail-data>
</div>

Obviously this is just a super basic example of how you might lay it out, but the concept is sound. Basically you'd iterate across your thumbnails and keep your detail banner section there but hidden via the ngIf, which causes it to never actually be drawn in the DOM until you decide to show it based on user interaction.

Appending dynamic Component to ngFor list

1 Answers