پست خبر خوب اینکه تو Dialog در Angular Material 22 قابلیت input binding اضافه شده.

خبر خوب اینکه تو Dialog در Angular Material 22 قابلیت input binding اضافه شده. یعنی چی؟ قبلا برای پاس دادن مقادیری به Mat Dialog باید data رو پر میکردیم و داخل Component مورد نظر با inject کردن MAT_DIALOG_DATA اونو میگرفتید و استفاده میکردیم حالا برای اینکه بتونیم از input و output و two-way binding استفاده کنیم قابلیت binding اضافه شده و میشه عین یه component که داخل html مینویسیم و بهش input و output پاس میدیم با component پاس داده شده به Dialog هم همون مدلی برخورد کنیم: برای مثال: code: protected openSettingsDialog() { this.dialog.open(NotificationSettingsComponent, { width: '28rem', panelClass: 'settings-dialog', data: {user: this.user()} }); } و با گرفتن MAT_DIALOG_DATA اون دیتا رو استفاده میکردیم. حالا با قابلیت binding میتونیم همچین چیزی انتظار داشته باشیم: code: <app-notification-settings [user]="user()" [(enabled)]="notificationsEnabled" (saved)="saveNotificationSettings($event)" /> حالا چطوری؟ code: protected openSettingsDialog() { this.dialog.open(NotificationSettingsComponent, { width: '28rem', panelClass: 'settings-dialog', bindings: [ inputBinding('user', this.user), outputBinding<NotificationSettingsSaved>('saved', settings => { this.saveNotificationSettings(settings); }), twoWayBinding('enabled', this.notificationsEnabled), ], }); } داخل component ای هم که داخل Dialog مد نظر داریم مثل حالت عادی signal input و outout و two-way رو استفاده میکنیم: code: export class NotificationSettingsComponent { readonly user = input<User | null>(null); readonly enabled = model(false); readonly saved = output<NotificationSettingsSaved>(); protected save() { if (this.user()) { this.saved.emit({ userId: this.user()!.id, enabled: this.enabled(), }); } } } منبع #angularsignal #angularcafe