如何将数组从子组件传递给父组件 angular 8

Question

I'm making app, that app have one button on top add video , that button open dialog with 4 inputs and 1 button add , when i click on button add , i want to push data from inputs in a arrayVideos like objects. Then i want to pass arrayVideos from add-video-form to a app component and to show that array in a table in app component (that table shows a list of a videos, in that list i have video name, video url, author and description.

Here is a add-video-form:

export class AddVideoFormComponent implements OnInit {
  videoForm: FormGroup;
  @Output() public childEvent = new EventEmitter();
  arrayVideos = [];

  constructor(public dialogRef: MatDialogRef<AddVideoFormComponent>) { }

  ngOnInit() {
    this.videoForm = new FormGroup({
      videoname : new FormControl('', Validators.required),
      url : new FormControl('', Validators.required),
      author : new FormControl('', Validators.required),
      description : new FormControl('', Validators.required),
    });
  }

  onSubmit() {
    console.warn(this.videoForm.value);
    this.dialogRef.close(this.arrayVideos.push(this.videoForm.value));
    this.childEvent.emit(this.arrayVideos);
  }
}

Here is a ts of a app component

export interface PeriodicElement {
  videoname: string;
  url: string;
  author: string;
  description: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
{videoname: 'Shakira - dance', url: 'blablablablablablabla', author: 'Shakira', description: 'some desc'},
{videoname: 'Justin - break', url: 'nanananananananananana', author: 'Justin', description: 'some desc2'},
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'Zadatak';
  exampleParent: [];

  displayedColumns: string[] = ['videoname', 'author', 'description', 'url' ];
  dataSource = ELEMENT_DATA;

  constructor(public dialog: MatDialog) {}

  openDialog() {
  this.dialog.open(AddVideoFormComponent);

  }
}

Answer 1

You can use afterClosed method. https://material.angular.io/components/dialog/api

const dialogRef = this.dialog.open(AddVideoFormComponent);
dialogRef.afterClosed().subscribe(x => ...);