Oleg-Sulzhenko
1/28/2019 - 5:44 PM

Ng Material Dialog (Modal)

  public openModal(jobToEdit: RecurrentJob): void {
    let dialogRef = this.dialog.open(AddEditJobFormComponent, {
      width: '600px',
      data: { exampleDataPassedToDialog: 'some Data' } // you can pass Data here instead of Input()
    });
    dialogRef.componentInstance.jobToEdit = jobToEdit;
    dialogRef.componentInstance.formData.subscribe((formData: RecurrentJob) => {
      this.newJob.next(formData);
    });
    dialogRef.afterClosed().pipe(take(1)).subscribe(() => { dialogRef = null; });
  }
  <span (click)="showMore(fullDescription)">More</span>
  
  <ng-template #fullDescription>
    <p style="margin-bottom: 0;">{{ job.description }}</p>
  </ng-template>
  
  showModal(templateRef) {
    let dialogRef = this.dialog.open(templateRef, {
      width: '600px',
    });
    dialogRef.afterClosed().pipe(take(1)).subscribe(() => { dialogRef = null; });
  }