Input-popup NPM

Input Popup

Input Popup is an angular component that allows you to create a popup with a input for the user to enter something in and get the data that they input.

Installation

npm install input-popup

Usage

import { InputValueComponent } from 'input-popup';
import { MatDialog } from '@angular/material/dialog';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    constructor(private dialog: MatDialog) { }

    async someFunction() {
        // the color property is the color of the title, default is black
        const config: MatDialogConfig<any> = {data: {title: "What is your name?", name: "Name", color: "#324ea8"}};
        const data: null | string = await this.dialog.open(InputValueComponent, config).afterClosed().toPromise();
        // data will either be null or the string value of the input
        if (data == null) {
            return; // the user closed the dialog or did not provide any value
        }
        else {
            console.log(data); // the value the user inputted
        }
    }
    
}