title: In Angular 8, how to pass dynamic data from an observable to a modal-dialog?
body: <p>In Angular 8 I want to implement an Angular-Material Modal-Dialog. Upon clicking on a user image, the user data should be displayed in the modal. I am unable to pass the dynamic data of the observable from the Profile component to the Profile-Modal component. 
  For testing, I subscribed to the observable in the ngOnInit() of Profile.component.ts, the array of data objects is console-logged properly. If I use the same subscription in openDialog() which serves to open the Modal-Dialog, I get this error message:
  Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
      at NgForOf.ngDoCheck </p>
  
  <p>profile.component.ts: 
  (in profile.component.html everything works properly, *ngFor="let member of members" works correct and with interpolation I get the data, i.e. {{member.name }})</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AngularFirestore } from '@angular/fire/firestore';
  import { Observable } from 'rxjs';
  
  import { MatDialog } from '@angular/material';
  import { ProfileModalComponent } from '../profile-modal/profile-modal.component';
  
  @Component({
    selector: 'app-profile',
    templateUrl: './profile.component.html',
    styleUrls: ['./profile.component.css']
  })
  export class ProfileComponent implements OnInit {
    observableData: observableData[] = [];
    members: Observable&lt;any[]&gt;;
  
    constructor(db: AngularFirestore,
                public dialog: MatDialog) {
      this.members = db.collection('members').valueChanges();
    }
  
    openDialog(): void {
      let observableData = this.members.subscribe(members =&gt; members);
      this.dialog.open(ProfileModalComponent, {
        width: '80%',
        height: '80%',
        data: {data: observableData}
      });
    }
    // logs the array with the objects
    ngOnInit() {
      const members = this.members.subscribe(
        member =&gt; console.log(member)
      )
    }
  }
  </code></pre>
  
  <p>profile-modal.component.ts:</p>
  
  <pre><code>import { Component, Inject, Input } from '@angular/core';
  import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
  
  @Component({
    selector: 'app-profile-modal',
    templateUrl: 'profile-modal.component.html',
    styleUrls: ['profile-modal.component.css']
  })
  export class ProfileModalComponent {
    constructor(public dialogRef: MatDialogRef&lt;ProfileModalComponent&gt;,
                @Inject(MAT_DIALOG_DATA) public data: any) {}
  
    onNoClick(): void {
      this.dialogRef.close();
    }
  }
  </code></pre>