Exemplo PopUp

chamaPopup.component.ts

  openPopUp(data: any = {}, isNew?) {
    this.isPopupOpened = true;
    let title = isNew ? 'Adicionar Item' : 'Editar Item';
    let dialogRef: MatDialogRef<any> = this.dialog.open(PopUpComponent, {
      width: '1024px',
      disableClose: true,
      data: { title: title, payload: data, editMode: !isNew }
    })
    dialogRef.afterClosed().subscribe(res => {
      this.getItems();
    })
  }

popup.component.html

<h1 matDialogTitle>{{data.title}}</h1>
<form [formGroup]="itemForm" (ngSubmit)="submit()">
  <div fxLayout="row wrap" fxLayout.lt-sm="column">

    <div fxFlex="50" class="pr-1">
      <mat-form-field class="full-width">
        <input matInput name="title" [formControl]="itemForm.controls['title']" placeholder="Título">
      </mat-form-field>
    </div>

    <div fxFlex="50" class="pr-1">
      <mat-form-field class="full-width">
        <input matInput type="text" name="subtitle" [formControl]="itemForm.controls['subTitle']" placeholder="Sub-Título">
      </mat-form-field>
    </div>

    <div fxFlex="50" class="pr-1">
      <mat-form-field class="full-width">
        <input matInput type="text" name="smallDescription" [formControl]="itemForm.controls['smallDescription']"
          placeholder="Descrição">
      </mat-form-field>
    </div>

    <div fxFlex="100" class="mt-1">
      <button mat-button color="warn" type="button" (click)="dialogRef.close(false)">Cancelar</button>
      <span fxFlex></span>
      <button mat-raised-button color="primary" [disabled]="itemForm.invalid" (click)="saveData()">Salvar</button>
    </div>
  </div>
</form>

popup.component.ts

import { Component, Inject, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { AppLoaderService } from '../../../../shared/services/app-loader/app-loader.service';

@Component({
    selector: 'app-popup',
    templateUrl: './popup.component.html',
    styleUrls: ['./popup.component.css']
})
export class PopUpComponent implements OnInit {

    public itemForm: FormGroup;

    isNew: boolean = false;

    constructor(
        private fb: FormBuilder,
        public dialogRef: MatDialogRef<PopUp>,
        private loader: AppLoaderService,
        @Inject(MAT_DIALOG_DATA) public data: any
    ) { }

    onNoClick(): void {
        this.dialogRef.close();
    }

    ngOnInit() {
        this.buildItemForm(this.data.payload);
    }

    buildItemForm(item) {
        this.itemForm = this.fb.group({
            title: [item.title || '', Validators.required],
            subTitle: [item.subtitle || '', Validators.required],
            smallDescription: [item.smallDescription || '', Validators.required]
        });

    }

    submit() {
        this.dialogRef.close(this.itemForm.value)
    }

    saveData() {
        if (this.data.editMode) {

            let editData: ItemEdit = {
                id: this.data.payload.id,
                title: this.itemForm.controls['title'].value,
                subTitle: this.itemForm.controls['subTitle'].value,
                smallDescription: this.itemForm.controls['smallDescription'].value
            }

            this.dataService.editItem(editData)
                .then(res => {
                    this.loader.open();
                    setTimeout(() => {
                        this.alertService.close();
                        this.loader.close();
                    }, 2000);
                    this.alertService.open("Novidade Editada com Sucesso", this.assetService.getCheckIcon());
                }, err => {
                    setTimeout(() => {
                        this.alertService.close();
                    }, 3000);
                    this.alertService.open("Ocorreu um Erro", this.assetService.getCancelIcon());
                    console.error(err);
                });
        } else {

            let addData: ItemAdd = {
                title: this.itemForm.controls['title'].value,
                subTitle: this.itemForm.controls['subTitle'].value,
                smallDescription: this.itemForm.controls['smallDescription'].value
            }

            this.dataService.addItem(addData)
                .then(res => {
                    this.loader.open(); //
                    setTimeout(() => {
                        this.alertService.close();
                        this.loader.close();
                    }, 2000);
                    this.alertService.open("Novidade Adicionada com Sucesso", this.assetService.getCheckIcon());
                }, err => {
                    setTimeout(() => {
                        this.alertService.close();
                    }, 3000);
                    this.alertService.open("Ocorreu um Erro", this.assetService.getCancelIcon());
                    console.error(err);
                });
        }

        this.dialogRef.afterClosed();
    }
}