title: how to pass a row data or the object of an array to a component in Angular using MatDialog
body: <p>What I want is that, when I click on the specific row's button, it should open up a matDialog box which should display me all the contents of the row.
  This is the <strong>html file</strong>,</p>
  <pre><code>                           &lt;tr *ngFor=&quot;let u of users&quot;&gt;
                                  &lt;td data-label=&quot;ID&quot;&gt;{{u.name}}&lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;button (click)=&quot;toggle(u)&quot; mat-button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
                                          Show Details
                                      &lt;/button&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
  </code></pre>
  <p>And this is my <strong>ts file</strong>.</p>
  <pre><code>
  users = [
      {
        'name':'arjun'
      },
      {
        'name':'Karan'
      }
    ]
  
  
  toggle(userRow:any){
      const dialogConfig = new MatDialogConfig();
      dialogConfig.disableClose = false;
      dialogConfig.autoFocus = true;
      dialogConfig.width=&quot;60%&quot;;
      this.dialog.open(UserDetailsPopupComponent, dialogConfig);
    }
  </code></pre>
  <p>And this is my <strong>html file</strong> of the component(<strong>UserDetailsPopUp</strong>) that will open using MatDialogue.</p>
  <pre><code>&lt;h1&gt;Hello{{u.name}}&lt;/h1&gt;
  </code></pre>
  <p>But I'm not able to send the row data from the toggle function to this component. How do I do that? And load that data and display it.</p>