|
dialogCloseSignal
|
Type : string
|
Default value : ''
|
|
|
Outputs
|
dialogCloseSignal
|
Type : string
|
|
|
|
data
|
Type : unknown
|
Default value : inject<DialogItemCopyData>(MAT_DIALOG_DATA)
|
|
|
|
Readonly
dialogRef
|
Type : unknown
|
Default value : inject(MatDialogRef<DialogItemCopyComponent>)
|
|
|
import {
ChangeDetectionStrategy,
Component,
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 DialogItemCopyData {
itemType: string;
itemName: string;
itemUid: string;
}
@Component({
selector: 'cobbler-dialog-item-copy',
imports: [
MatDialogModule,
MatButtonModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
FormsModule,
],
templateUrl: './dialog-item-copy.component.html',
styleUrl: './dialog-item-copy.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DialogItemCopyComponent {
data = inject<DialogItemCopyData>(MAT_DIALOG_DATA);
readonly dialogRef = inject(MatDialogRef<DialogItemCopyComponent>);
readonly dialogCloseSignal = model('');
onNoClick(): void {
this.dialogRef.close();
}
}
<h1 mat-dialog-title i18n="@@dialog.copy.title">Copy {{ data.itemType }}</h1>
<mat-dialog-content>
<mat-form-field class="form-field-full-width">
<mat-label i18n="@@dialog.copy.label.old-name">Old name</mat-label>
<input matInput readonly value="{{ data.itemName }}" />
</mat-form-field>
<mat-form-field class="form-field-full-width">
<mat-label i18n="@@dialog.copy.label.new-name">New name</mat-label>
<input
matInput
[(ngModel)]="dialogCloseSignal"
cdkFocusInitial
placeholder="New name"
i18n-placeholder="@@dialog.copy.placeholder.new-name"
/>
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button (click)="onNoClick()" i18n="@@button.close">Close</button>
<button
mat-button
[mat-dialog-close]="dialogCloseSignal()"
i18n="@@dialog.copy.button.copy"
>
Copy
</button>
</mat-dialog-actions>
.form-field-full-width {
width: 100%;
}
Legend
Html element with directive