### File

`src/app/shared/dialog/input-dialog/input-dialog.component.ts`

### Implements

`OnInit`

### Metadata

selector | `hi-input-dialog`
styleUrls | `./input-dialog.component.scss`
templateUrl | `./input-dialog.component.html`

### Index

###### Properties
message title values
###### Methods
getKeys ngOnInit onCancel onSubmit

### Constructor

`constructor(data: any, dialogRef: MatDialogRef<InputDialogComponent>)`
Defined in src/app/shared/dialog/input-dialog/input-dialog.component.ts:13
Parameters :
Name | Type | Optional
data | `any` | No
dialogRef | `MatDialogRef<InputDialogComponent>` | No

### Methods

getKeys
`getKeys(obj: any)`
Defined in src/app/shared/dialog/input-dialog/input-dialog.component.ts:39
Parameters :
Name | Type | Optional
obj | `any` | No
Returns : `any`

ngOnInit
`ngOnInit()`
Defined in src/app/shared/dialog/input-dialog/input-dialog.component.ts:20
Returns : `void`

onCancel
`onCancel()`
Defined in src/app/shared/dialog/input-dialog/input-dialog.component.ts:35
Returns : `void`

onSubmit
`onSubmit()`
Defined in src/app/shared/dialog/input-dialog/input-dialog.component.ts:31
Returns : `void`

### Properties

message
Type : `string`
Defined in src/app/shared/dialog/input-dialog/input-dialog.component.ts:12

title
Type : `string`
Defined in src/app/shared/dialog/input-dialog/input-dialog.component.ts:11

values
Type : `any[]`
Defined in src/app/shared/dialog/input-dialog/input-dialog.component.ts:13

    import { Component, OnInit, Inject } from '@angular/core';
    import { MatDialogRef } from '@angular/material/dialog';
    import { MAT_DIALOG_DATA } from '@angular/material/dialog';

    @Component({
      selector: 'hi-input-dialog',
      templateUrl: './input-dialog.component.html',
      styleUrls: ['./input-dialog.component.scss'],
    })
    export class InputDialogComponent implements OnInit {
      title: string;
      message: string;
      values: any[];

      constructor(
        @Inject(MAT_DIALOG_DATA) protected data: any,
        protected dialogRef: MatDialogRef<InputDialogComponent>
      ) {}

      ngOnInit() {
        this.title = (this.data && this.data.title) || 'Input';
        this.message = (this.data && this.data.message) || 'Please enter:';
        this.values = (this.data && this.data.values) || {
          input: {
            label: 'Anything you want',
            type: 'input',
          },
        };
      }

      onSubmit() {
        this.dialogRef.close(this.values);
      }

      onCancel() {
        this.dialogRef.close();
      }

      getKeys(obj: any) {
        return Object.keys(obj);
      }
    }

    <!--
      ~ Licensed to the Apache Software Foundation (ASF) under one
      ~ or more contributor license agreements.  See the NOTICE file
      ~ distributed with this work for additional information
      ~ regarding copyright ownership.  The ASF licenses this file
      ~ to you under the Apache License, Version 2.0 (the
      ~ "License"); you may not use this file except in compliance
      ~ with the License.  You may obtain a copy of the License at
      ~
      ~     http://www.apache.org/licenses/LICENSE-2.0
      ~
      ~ Unless required by applicable law or agreed to in writing,
      ~ software distributed under the License is distributed on an
      ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
      ~ KIND, either express or implied.  See the License for the
      ~ specific language governing permissions and limitations
      ~ under the License.
      -->

    <form (ngSubmit)="onSubmit()" #inputForm="ngForm">
      <h1 mat-dialog-title>{{ title }}</h1>
      <div mat-dialog-content>
        <section>
          {{ message }}
        </section>
        <section
          *ngFor="let name of getKeys(values)"
          [ngSwitch]="values[name].type"
        >
          <section *ngSwitchCase="'boolean'">
            {{ values[name].label }}:
            <mat-slide-toggle [name]="name" [(ngModel)]="values[name].value">
              {{ values[name].value ? 'True' : 'False' }}
            </mat-slide-toggle>
          </section>
          <mat-form-field *ngSwitchCase="'password'">
            <input
              matInput
              type="password"
              [name]="name"
              [(ngModel)]="values[name].value"
              [placeholder]="values[name].label"
              required
            />
          </mat-form-field>
          <mat-form-field *ngSwitchDefault>
            <input
              matInput
              [name]="name"
              [(ngModel)]="values[name].value"
              [placeholder]="values[name].label"
              required
            />
          </mat-form-field>
        </section>
      </div>
      <div mat-dialog-actions>
        <button
          mat-button
          type="submit"
          color="primary"
          [disabled]="!inputForm.form.valid"
        >
          OK
        </button>
        <button mat-button type="button" (click)="onCancel()">Cancel</button>
      </div>
    </form>

`./input-dialog.component.scss`

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""