projects/cobbler-frontend/src/app/common/dialog-key-value-input/dialog-key-value-input.component.ts

Metadata

Relationships

Used by

No results matching.

Depends on

  • FormsModule
  • MatButtonModule
  • MatDialogModule
  • MatFormFieldModule
  • MatInputModule

Index

Properties
Methods

Methods

onNoClick
onNoClick()
Returns : void
onYesClick
onYesClick()

Properties

data
Type : DialogKeyValueInputReturnData
Default value : { key: '', value: '' }
Readonly dialogRef
Type : unknown
Default value : inject(MatDialogRef<DialogKeyValueInputComponent>)
import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

export interface DialogKeyValueInputReturnData {
  key: string;
  value: string;
}

@Component({
  selector: 'cobbler-dialog-key-value-input',
  imports: [
    FormsModule,
    MatButtonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
  ],
  templateUrl: './dialog-key-value-input.component.html',
  styleUrl: './dialog-key-value-input.component.scss',
})
export class DialogKeyValueInputComponent {
  data: DialogKeyValueInputReturnData = { key: '', value: '' };
  readonly dialogRef = inject(MatDialogRef<DialogKeyValueInputComponent>);

  onNoClick(): void {
    this.dialogRef.close();
  }

  onYesClick(): DialogKeyValueInputReturnData {
    return this.data;
  }
}
<h2 mat-dialog-title i18n="@@dialog.key-value-input.title">Add new Option:</h2>
<mat-dialog-content>
  <mat-form-field>
    <mat-label i18n="@@dialog.key-value-input.label.new-key">New Key</mat-label>
    <input matInput cdkFocusInitial [(ngModel)]="this.data.key" />
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n="@@dialog.key-value-input.label.new-value"
      >New Value</mat-label
    >
    <input matInput [(ngModel)]="this.data.value" />
  </mat-form-field>
</mat-dialog-content>
<mat-dialog-actions class="buttons">
  <button
    mat-button
    (click)="onNoClick()"
    i18n="@@dialog.key-value-input.button.no-thanks"
  >
    No Thanks
  </button>
  <button
    mat-button
    [mat-dialog-close]="onYesClick()"
    i18n="@@dialog.key-value-input.button.ok"
  >
    Ok
  </button>
</mat-dialog-actions>

./dialog-key-value-input.component.scss

:host {
  display: flex;
  flex-direction: column;
}

.buttons {
  margin-left: auto;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""