Как передать массив от дочернего к родительскому компоненту angular 8

Question

Я делаю приложение, у этого приложения есть одна кнопка сверху , добавьте видео , это диалоговое окно открытия кнопки с 4 входами и 1 кнопкой добавьте , когда я нажимаю на кнопку добавить , я хочу получить sh данные из входных данных в массиве, похожие на видео объекты. Затем я хочу передать arrayVideos из add-video-form в компонент приложения и показать этот массив в таблице в компоненте приложения (эта таблица показывает список видео, в этом списке у меня есть название видео, URL видео, автор и description.

Вот форма для добавления видео:

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);
  }
}

Вот ts компонента приложения

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

Вы можете использовать afterClosed метод. https://material.angular.io/components/dialog/api

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