File
Readonly
dialogCloseSignal
|
Default value : model('')
|
|
Readonly
dialogRef
|
Default value : inject(MatDialogRef<DialogItemRenameComponent>)
|
|
import {
ChangeDetectionStrategy,
Component,
inject,
Inject,
model,
} from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import {
MAT_DIALOG_DATA,
MatDialogModule,
MatDialogRef,
} from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
export interface DialogItemRenameData {
itemType: string;
itemName: string;
itemUid: string;
}
@Component({
selector: 'cobbler-dialog-item-rename',
standalone: true,
imports: [
MatDialogModule,
MatButtonModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
],
templateUrl: './dialog-item-rename.component.html',
styleUrl: './dialog-item-rename.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DialogItemRenameComponent {
readonly dialogRef = inject(MatDialogRef<DialogItemRenameComponent>);
readonly dialogCloseSignal = model('');
constructor(@Inject(MAT_DIALOG_DATA) public data: DialogItemRenameData) {}
onNoClick(): void {
this.dialogRef.close();
}
}
<h1 mat-dialog-title>Rename {{ data.itemType }}</h1>
<mat-dialog-content>
<mat-form-field class="form-field-full-width">
<mat-label>Old name</mat-label>
<input matInput readonly value="{{ data.itemName }}" />
</mat-form-field>
<mat-form-field class="form-field-full-width">
<mat-label>New name</mat-label>
<input
matInput
[(ngModel)]="dialogCloseSignal"
cdkFocusInitial
placeholder="New name"
/>
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="onNoClick()">Close</button>
<button mat-button [mat-dialog-close]="dialogCloseSignal()">Rename</button>
</mat-dialog-actions>
Legend
Html element with directive