CODEWITHSUNDEEP
angulartypescriptangular-signals
fservantdev
fservantdev

Reputation: 765

How to set signal-based input value of dialog component instance?

Today, when we use a component in a dialog, we can pass the value of an input this way:

@Component({
  selector: 'app-foo',
  template: '{{ data }}',
})
export class FooComponent {
  @Input() data: IFooData | null = null;
}

const dialogRef = this.dialog.open(FooComponent);
dialogRef.componentInstance.data = ...; // <-- we can pass the value here

(See Angular 2: Set @Input variables in Dialog Component)

How do you do the same with a signal-based input?

@Component({
  selector: 'app-foo',
  template: '{{ data }}',
})
export class FooComponent {
  data = input<IFooData | null>(null)
}

Note: I know that I could use MatDialogConfig.data + MAT_DIALOG_DATA,
but I do not want to couple my FooComponent with the dialog concept.

Upvotes: 2

Views: 92

Answers (1)

Naren Murali
Naren Murali

Reputation: 57696

We can use setInput of the componentRef to set signal values.

MatDialogRef - Source Code

const dialogRef = this.dialog.open(FooComponent);
dialogRef.componentRef.setInput('data', { test: 1});

Upvotes: 3

Related Questions