I need to display an object in a modal. When the read more button is clicked, it should send the title name and Amazon link to a function that will pass them to the modal. However, ngFor doesn't seem to display the object, and only one object is sent at a time. I just need to show the object like {{modal.name}} using the key and value in the HTML template.
/*Function*/
readMore(text: string) {
this.modal = text;
} <h1 class="uk-flex uk-flex-center uk-width-1-1">{{book.list_name}}</h1>
<hr class="uk-divider-icon uk-width-1-1">
<div class="uk-grid uk-grid-divider textali">
<div class="uk-width-1-3">List Updated {{book.updated | lowercase }}
</div>
<div class="uk-width-1-3">
<a href="#offcanvas-usage" class="uk-button uk-button-primary" uk-toggle>Categories</a>
</div>
<div class="uk-width-1-3">List Published On {{book.published_date | lowercase |date: 'fullDate'}}
</div>
</div>
<div class="uk-grid uk-grid-medium" >
<div class="uk-child-width-1-5@s uk-grid-match" uk-grid>
<div *ngFor="let name of book.books; let i = index">
<div class="uk-card uk-card-hover uk-card-body">
<img src="{{name.book_image}}"><br /><br />
<span>Summary: {{name.description || ' NA'}}</span><br />
<hr class="uk-divider-icon">
<span>Author {{name.author}}</span>
<br />
<br />Best Sellers Rank {{name.rank}}
<br />
<span>Weeks on List {{name.weeks_on_list}}</span>
<div class="uk-card-footer">
<a href="{{name.amazon_product_url}}" class="button uk-icon-link uk-margin-small-right" uk-icon="icon: cart; ratio: 1.5"></a>
<span><a class="uk-icon-link uk-margin-small-right" (click)="addFav({title: name.title, image:name.book_image, amazon:name.amazon_product_url})" uk-icon="icon: heart; ratio: 1.5"></a></span> /*This is the data being sent*/
<a (click)="readMore({name: name.title, desc:name.description, author:name.author})" uk-toggle="target: #read-more" class="uk-icon-link uk-margin-small-right" uk-icon="icon: info; ratio: 1.5"></a>
</div>
</div>
</div>
</div>
</div>
<div id="offcanvas-usage" uk-offcanvas>
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" (click)="this.isButtonVisible = true" type="button" uk-close></button>
<h3>Categories</h3>
<div *ngFor="let section of names">
<div class="uk-flex uk-flex-column">
<ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
<li class="uk-active"><a (click)="sectionlink(section.list_name)">{{section.list_name}}</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="read-more" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
/*Where the Data gets displayed*/
<h2 class="uk-modal-title">{{item.name}} </h2>
<hr class="uk-divider-icon">
<hr class="uk-divider-icon">
<button class="uk-modal-close uk-button uk-button-danger" type="button">Close</button>
</div>
</div>