title: Get data from selected row in table
body: <p>I got simple table with dynamic data supplied by api.</p>
  
  <pre><code> &lt;table class="table align-items-center table-flush responsive"&gt;
                      &lt;thead class="thead-light"&gt;
                        &lt;tr&gt;
                          &lt;th scope="col" style="width: 8px"&gt;ID&lt;/th&gt;
                          &lt;th scope="col"&gt;NAME&lt;/th&gt;
                          &lt;th scope="col"&gt;RECIPIENTS&lt;/th&gt;
                          &lt;th scope="col" class="text-right"&gt;ACTION&lt;/th&gt;
                        &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                        &lt;tr *ngFor="let aliases of alias; let i = index;"&gt;
                          &lt;td id="nr"&gt;{{aliases.nr}}&lt;/td&gt;
                          &lt;td id="lPart"&gt;{{aliases.local_part}}&lt;/td&gt;
                          &lt;td id='{{ i+1 }}' (click)="onClick($event)" style="cursor: pointer;font-weight: bold;"&gt;
                            {{aliases.recipients}}
                          &lt;/td&gt;
                          &lt;td class="text-right"&gt;
                            &lt;button class="btn btn-sm btn-primary"&gt;Edit&lt;/button&gt;
                            &lt;button class="btn btn-sm btn-danger"&gt;Delete&lt;/button&gt;
                          &lt;/td&gt;
                        &lt;/tr&gt;
                      &lt;/tbody&gt;
                    &lt;/table&gt;
  </code></pre>
  
  <p>And there is my modal:</p>
  
  <pre><code>&lt;div class="modal" id="myModal" [style.display]="showModal ? 'block' : 'none'"&gt;
          &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
  
              &lt;div class="modal-header"&gt;
                &lt;h4 class="modal-title"&gt;NAME: &lt;strong&gt;{{title}}&lt;/strong&gt;&lt;/h4&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-body"&gt;
                {{ recipients }}&lt;br&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-footer"&gt;
                &lt;button type="button" class="btn btn-danger" data-dismiss="modal" (click)="hide()"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>and my component.ts</p>
  
  <pre><code>  onClick(event) {
  
      this.showModal = true;
      this.choosedId = event.target.id;  
       console.log('id: '+this.choosedId);    
    }
    hide() {
      this.showModal = false;
    }
  
    getAliases() {
      this.aliasesService.getAliases().subscribe(
        res =&gt; {
          this.alias = res;
        },
        err =&gt; console.error(err)
      );
    }
  </code></pre>
  
  <p>I got id of selected row but how can I get data of "recipients" and put it into my modal?</p>
  
  <p>I want to display in my modal title ( this is aliases.local_part ) and recipients ( this is aliases.recipients ) but only of clicked row in table.</p>