ngx-simple-dialog

An Angular 5+ powered AOT compatible device detector that helps to identify browser, os and other useful information regarding the device using the app. The processing is based on user-agent.

DOCS

Ngx Simple Dialog DOCS

Installation

To install this library, run:

$ npm install ngx-simple-dialog --save

Usage

Import SimpleDialogModule in your app.module.ts

  import { NgModule } from '@angular/core';
  import { SimpleDialogModule } from 'ngx-simple-dialog';
  import {DialogComponent} from './dialog/dialog.component';
  ...
  @NgModule({
    declarations: [
      // Your component that you want to use as a dialog
      DialogComponent
      ...
    ],
    imports: [
      SimpleDialogModule.forRoot()
    ],
    entryComponents: [
        // Do not forget to add the component to the entryComponents.
        DialogComponent
      ],
    ...
  })

In your component where you want to use the Dialog Service

  import { Component } from '@angular/core';
  ...
  import {DialogService} from 'ngx-simple-dialog';
  // Your component that you want to use as a dialog
  import {DialogComponent} from './dialog/dialog.component';
  ...
  @Component({
    selector: 'home',  // <home></home>
    styleUrls: [ './home.component.scss' ],
    templateUrl: './home.component.html',
    ...
  })
 
  export class HomeComponent {
    deviceInfo = null;
    ...
    constructor(private dialogService: DialogService) {}
    ...
    openDialog() {
      // Passing the component to open
      this.dialogService.open(DialogComponent, {
        // data for dialog
      })
    }
  }
 

Dialog service

Holds the following properties

• browser

Helper Methods

• open() : The method of opening the modal window. As parameters it takes the component and the data, if needed, to transmit the dialog
• close() : Closes the modal window