Title: Passing data to custom modal dialog in Angular
Tags: angular;modal-dialog
Question: I've been having some issues lately trying to get a custom modal window with an carousel component functioning correctly. I'm pretty new to Angular, so I'm having issues achieving the desired effect. My goal is to receive data from a service that could have an array of images. If images are present, a glyphicon button will be displayed that will open the custom modal dialogue. I want to pass that array of images on to the modal carousel window for browsing.
As of right now, I can open the modal window, however if it does show the images, it will be the same set of images for each row regardless if it has different images associated with that row or not. Some won't even display the yroberts@example.org.
catalog-list.component.html
<tbody&gt;
<tr *ngFor='let catalog of catalogs'&gt;
<td&gt;{{ catalog.Catalog }}</td&gt;
<td&gt;{{ catalog.Description }}</td&gt;
<td&gt;{{ catalog.OnHand }}</td&gt;
<td&gt;{{ catalog.InTransit }}</td&gt;
<td&gt;{{ catalog.CustomerHold }}</td&gt;
<td&gt;{{ catalog.NetInventory }}</td&gt;
<td&gt;{{ catalog.Scheduled }}</td&gt;
<td&gt;
<div data-toggle='modal' data-target='#myModal' *ngIf='catalog.Images.length &gt; 0'&gt;
<a class="picture image-gallery-launcher" href="#myGallery" role="button" title="View Images"&gt;
<span class="glyphicon glyphicon-picture"&gt;</span&gt;
</a&gt;
</div&gt;
</td&gt;
<cm-image-gallery [gallery]='catalog.Images'&gt;</cm-image-gallery&gt;
</tr&gt;
</tbody&gt;
image-gallery.component.ts
import { Component, Input } from "@angular/core";
import { IGallery } from "./image-gallery";
import { OnInit } from "@angular/core/src/metadata/lifecycle_hooks";
@Component({
selector: 'cm-image-gallery',
templateUrl: './image-gallery.component.html'
export class ImageGalleryComponent implements OnInit{
@Input() gallery: IGallery[];
ngOnInit(){
console.log(this.gallery);
image-gallery.component.html
<div class="modal fade" id="myModal" role="dialog"&gt;
<div class="modal-dialog"&gt;
<div class="modal-content"&gt;
<div class="modal-header"&gt;
<div class="pull-left"&gt;Catalog Viewer</div&gt;
<button type="button" class="close" data-dismiss="modal" title="Close"&gt; <span class="glyphicon glyphicon-remove"&gt;</span&gt;</button&gt;
</div&gt;
<div class="modal-body"&gt;
<div style="position: relative;" *ngIf="gallery != []"&gt;
<div id="myGallery" class="carousel slide" data-ride="carousel"&gt;
<!-- Indicators --&gt;
<ol class="carousel-indicators"&gt;
<li data-target="#myGallery" *ngFor="let x of gallery;let i = index" [attr.data-slide-to]="i" ngClass="i == 0 ? 'active' : ''"&gt;</li&gt;
</ol&gt;
<!-- Wrapper for slides --&gt;
<div class="carousel-inner" role="listbox"&gt;
<div *ngFor="let j of gallery; let k = index" [ngClass]="k == 0 ? 'item active' : 'item'"&gt;
<img [src]=gallery[k] height="400" width="400"&gt;
<div class="carousel-caption"&gt;
<!-- <h3&gt;{{gallery[k].name}}</h3&gt;
<p&gt;{{gallery[k].description}}</p&gt; --&gt;
</div&gt;
</div&gt;
</div&gt;
<!-- Left and right controls --&gt;
<a class="left carousel-control" href="#myGallery" role="button" data-slide="prev"&gt;
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;</span&gt;
<span class="sr-only"&gt;Previous</span&gt;
</a&gt;
<a class="right carousel-control" href="#myGallery" role="button" data-slide="next"&gt;
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;</span&gt;
<span class="sr-only"&gt;Next</span&gt;
</a&gt;
</div&gt;
</div&gt;
<!-- Gallery Code end --&gt;
</div&gt;
<div class="modal-footer"&gt;
<button class="btn-sm close" type="button" data-dismiss="modal"&gt;Close</button&gt;
</div&gt;
</div&gt;
</div&gt;
Comment: changing to [src]="gallery[k]"  had no effect

Comment: So the issue doesn't seem to be in the image-gallery itself. The buttons only ever pulls up the first record in the table. For instance, if i click on the image button located on row 6 of the catalog-list.component.html table, it will open up the dialog for row 1

Comment: quick glance - try `[src]=gallery[k]` to `[src]="gallery[k]"`

Comment: Can you create a plunkr ? try this *ngFor syntax `let x of galler; index as i; first as isFirst"` instead of `let k = index` then use `isFirst`


Here is another answer: I ended up solving this particular issue by creating an output in catalog-list.component.ts
catalog-list.component.ts
@Output() //used so that the image gallery gets the catalog the user selects in the table
selectedCatalog: EventEmitter<ICatalog&gt; = new EventEmitter<ICatalog&gt;();
setCurrentCatalog(catalog: ICatalog) : void{
this.selectedCatalog.emit(catalog);
And then listening for it in image-gallery.component.ts
image-gallery.component.ts
constructor(private _catalogList : CatalogListComponent){
this._catalogList.selectedCatalogGallery
.subscribe(catalogs =&gt; {
this.gallery = catalogs.Images;
},
error =&gt; console.log(error));
This ensures that the image gallery is getting the correct row object instead of always defaulting to the first row.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 4, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2018:00:01/19/18', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<angular><modal-dialog>', 'Title': 'Passing data to custom modal dialog in Angular', 'ViewCount': 699, 'id': 48345023, 'user_AboutMe': None, 'user_AccountId': 12720166.0, 'user_DisplayName': 'jptremblay', 'user_Reputation': 1.0, 'user_Views': 2.0, 'user_id': 9240876.0}}