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 {}
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