0

I am creating component for matDialog.

this.matDialog.open(SegmentDialogComponent, { data: segment }})
  .afterClosed()
  .pipe(
    take(1),
    filter((i: any) => i)
  ).subscribe((i: CLASS) => this.update.emit(i) );

How I can provide service (that would implement ITableSegmentService interface) that SegmentDialogComponent can use

export interface ITableSegmentService {
 addSegment<T>(body: T): Observable<T>;
 removeSegment(id: string): Observable<void>
}

.

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

export class SegmentDialogComponent {

 constructor(@Inject(MAT_DIALOG_DATA) public tableSegment: TableSegment) { }

}
Andi Gvožđar
  • 11
  • 2

2 Answers2

1

I solved it like this:

Here for matDialogRef I provide service to that component that matDialog is using

  openEditDialog(): void {
    let instance = this.matDialog.open(SegmentDialogComponent);

    instance.componentInstance.service = this.dynamicService (type is 
 TableSegmentService);
}

Later in that Dialog component I can use service methods and provide it with data --- Mat Dialog Class ----

export class SegmentDialogComponent {
  service!: ITableSegmentService;
formData: any;
  addSegment() {
this.service.addSegment(this.formData)
}
}
Andi Gvožđar
  • 11
  • 2
0

You can create the service (not an interface) and add it to the respective providers module. (ex: app.module.ts) Then you just need to declare it on the constructor, like:

constructor(
  @Inject(MAT_DIALOG_DATA) public tableSegment: TableSegment,
  private tableSegmentService: TableSegmentService 
) { }

If you want to have more than one TableSegmentService type you need to use the @Inject to specify the service you want to inject.

Ricardo António
  • 11
  • 3