How do I use the index value of an array and pass it to a HTML modal so I can show the data there without using a loop in angular 7

Question

How do I use the index value of an array and pass it to a HTML modal so I can show the data there without using a loop in angular 7

 import { Component, OnInit } from '@angular/core'; import { ApiService } from '../services/api.service'; import { movieModel } from '../models/movie'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.less'] }) export class HomeComponent implements OnInit { movies:movieModel[]; constructor(public api:ApiService) { } ngOnInit() { this.loadMovies(); } loadMovies(): void { this.movies = []; this.api.getMovies().subscribe( data => { this.movies = data.results; this.movies = this.movies.slice(0 , 5); console.log(this.movies); } ); } } 

 <h1>Top 5 Movies by the New York Times</h1> <div class="uk-child-width-1-3@s uk-grid-match" uk-grid> <div *ngFor="let movie of movies; let i = index"> <div class="uk-card uk-card-hover uk-card-body"> <h3 class="uk-card-title">{{movie.display_title}}</h3> <span>Headline: {{movie.headline}}</span><br/> <span>Summary: {{movie.summary_short | characters:150 }}</span><br/><button class="uk-button uk-button-default" uk-toggle="target: #my-id">Read More</button><br/> <p>By: {{movie.byline}}<br/>Rating:{{mpaa_rating || NA}}<br/>Date of Release: {{movie.publication_date | date: 'dd/MM/yyyy'}}</p> </div> </div> </div> <div id="my-id" uk-modal> <div class="uk-modal-dialog uk-modal-body"> <h2 class="uk-modal-title">Summary</h2> {{movie.summary_short}} <button class="uk-modal-close uk-button uk-button-default" type="button">Close</button> </div> </div> 

Can someone please explain to me how i get the value for movie.summary_short to work in the dialog box I have the for loop index done but cant figure out how to pass it to the other HTML element

Answer 1

1. Declare another property like summary_short in component.ts .
2. bind on (click) of 'Read More' button to assign movie.summary_short to summary_short .

component.html

<button (click)="saveSummary(movie.summary_short)" class="uk-button uk-button-default" uk-toggle="target: #my-id">
  Read More
</button>
...
<div id="my-id" uk-modal>
    <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Summary</h2>
                {{summary_short}}
        <button class="uk-modal-close uk-button uk-button-default" type="button">Close</button>
    </div>
</div>
...

component.ts

...
summary_short
...
saveSummary(summary_short) {
  this.summary_short = summary_short
}
...

Answer 2

Add a function to Read More button, something like this:

<button class="uk-button uk-button-default" uk-toggle="target: #my-id" (click)="readMore(movie.summary_short)">Read More</button>

Then in .ts , declare a var modalText and each time this button is clicked:

readMore(text: string){
    this.modalText = text;
}

Finally, in modal , call {{ modalText }} .