Installation

From your project folder, run:

ng add @ngneat/dialog

This command will import the DialogModule.forRoot() in your AppModule:

import { DialogModule } from '@ngneat/dialog';

@NgModule({
  declarations: [AppComponent],
  imports: [DialogModule.forRoot()],
  bootstrap: [AppComponent]
})
export class AppModule {}

Usage

Using a Component

First, create the component to be displayed in the modal:

import { DialogService, DialogRef } from '@ngneat/dialog';

@Component({
  template: `
    <h1>Hello World</h1>
    <button (click)="ref.close()">Close</button>
  `
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloWorldComponent {
  constructor(public ref: DialogRef) {}
}

Inside the component, you’ll have access to a DialogRef provider. You can call its close() method to close the current modal. You can also pass data that’ll be available for any subscribers to afterClosed$.

Now we can use the DialogService to open open the modal and display the component:

import { DialogService } from '@ngneat/dialog';

@Component({
  template: `
    <button (click)="open()">Open</button>
  `
})
export class AppComponent implements OnInit {
  constructor(private dialog: DialogService) {}

  ngOnInit() {
    const dialogRef = this.dialog.open(HelloWorldComponent);
  }
}

#angular.js #angular