A simple guide on how to send an Angular component to the Nebular dialog service

Question

A simple guide on how to send an Angular component to the Nebular dialog service

My current project involves creating a web dialog in Angular6 using Nebular components. Initially, I used the method of passing an <ng-template> reference in the following manner:

openAddDialog = (dialogTemplate: TemplateRef<any>) => {
    this.dialogServiceRef = this.dialogService.open(dialogTemplate);
}

This approach worked without any issues. However, I now need to pass a component as a parameter like so:

dialogService.open(MyComponent);

My project structure is organized as follows:

|_ pages
|   |_ pages.module.ts
|   |_ patient
|      |_ patient.module.ts
|      |_ patient.component.ts
|      |_ patient.component.html
|
|_ shared
    |_ shared.module.ts
    |_ components
    |   |_ search-bar.component.ts
    |   |_ search-bar.component.html
    |
    |_ modal-form
        |_ modal-form.component.ts
        |_ modal-from.component.html

I have added the ModalFormComponent to the declarations, exports, and entryComponents in the shared module. Additionally, I imported it in the SearchBar component and attempted to run the function upon clicking a button in the searchBar:

openAddDialog = () => {
    this.dialogServiceRef = this.dialogService.open(ModalFormComponent);
}

Upon testing, I encountered the following error in the browser console:

ERROR Error: No component factory found for ModalFormComponent. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:19453)
    at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:19504)
    at NbPortalOutletDirective.attachComponentPortal (portal.js:506)
    at NbDialogContainerComponent.attachComponentPortal (index.js:17128)
    at NbDialogService.createContent (index.js:17336)
    at NbDialogService.open (index.js:17295)
    at SearchBarComponent.openAddDialog (search-bar.component.ts:46)
    at Object.eval [as handleEvent] (SearchBarComponent.html:11)
    at handleEvent (core.js:34777)
    at callWithDebugContext (core.js:36395)

Do you have any insights on what might be causing this issue and how I can resolve it?

typescript dialog angular6 nebular ngx-admin

Answer 1

Answer №1

Ensure to utilize the context parameter to transfer all the necessary parameters.

As an illustration, let's consider the scenario where we have the following SimpleInputDialogComponent:

import { Component, Input } from '@angular/core';
import { NbDialogRef } from '@nebular/theme';

@Component({
  selector: 'ngx-simple-input-dialog',
  templateUrl: 'simple-input-dialog.component.html',
  styleUrls: ['simple-input-dialog.component.scss'],
})
export class SimpleInputDialogComponent {

  title: String;
  myObject: MyObject;

  constructor(protected ref: NbDialogRef<SimpleInputDialogComponent>) {
  }

  cancel() {
    this.ref.close();
  }

  submit(value: String) {
    this.ref.close(value);
  }
}

Remember, when passing title and myObject, make use of the context parameter:

const sampleObject = new MyObject();
this.dialogService.open(SimpleInputDialogComponent, {
      context: {
        title: 'Enter template name',
        myObject: sampleObject,
      },
    })

Answer 2

Ensure to utilize the context parameter to transfer all the necessary parameters.

As an illustration, let's consider the scenario where we have the following SimpleInputDialogComponent:

import { Component, Input } from '@angular/core';
import { NbDialogRef } from '@nebular/theme';

@Component({
  selector: 'ngx-simple-input-dialog',
  templateUrl: 'simple-input-dialog.component.html',
  styleUrls: ['simple-input-dialog.component.scss'],
})
export class SimpleInputDialogComponent {

  title: String;
  myObject: MyObject;

  constructor(protected ref: NbDialogRef<SimpleInputDialogComponent>) {
  }

  cancel() {
    this.ref.close();
  }

  submit(value: String) {
    this.ref.close(value);
  }
}

Remember, when passing title and myObject, make use of the context parameter:

const sampleObject = new MyObject();
this.dialogService.open(SimpleInputDialogComponent, {
      context: {
        title: 'Enter template name',
        myObject: sampleObject,
      },
    })

Answer 3

Answer №2

Ensure to place the component in the entryComponents section of the module, whether it's the main module or a child module, based on your specific scenario.

import {NgModule} from '@angular/core';

import {
  //...
  NbDialogModule
  //...
} from '@nebular/theme';


@NgModule({
 declarations: [
 //...,
 ModalFormComponent,
 //...
 ],
 entryComponents: [
  //...
  ModalFormComponent,
  //...
 ],
 imports: [
 //...
 // NbDialogModule.forChild() or NbDialogModule.forRoot()
 //...
],
 providers: [
  //...
 ],
})
 export class ExampleModule{
}

Following this step should resolve the issue you are facing.

Answer 4

Ensure to place the component in the entryComponents section of the module, whether it's the main module or a child module, based on your specific scenario.

import {NgModule} from '@angular/core';

import {
  //...
  NbDialogModule
  //...
} from '@nebular/theme';


@NgModule({
 declarations: [
 //...,
 ModalFormComponent,
 //...
 ],
 entryComponents: [
  //...
  ModalFormComponent,
  //...
 ],
 imports: [
 //...
 // NbDialogModule.forChild() or NbDialogModule.forRoot()
 //...
],
 providers: [
  //...
 ],
})
 export class ExampleModule{
}

Following this step should resolve the issue you are facing.

Answer 5

Answer №3

According to the recommendations in nebular documents, the following code snippet is advised:

showDialog() {
 this.dialogService.open(yourComponent, {
   context: {
     title: 'Passing a title to the dialog component',
   },
 });
}

Answer 6

According to the recommendations in nebular documents, the following code snippet is advised:

showDialog() {
 this.dialogService.open(yourComponent, {
   context: {
     title: 'Passing a title to the dialog component',
   },
 });
}

Answer 7

Answer №4

resolution : acquire the parameters using ngOnInit instead of the constructor

Answer 8

resolution : acquire the parameters using ngOnInit instead of the constructor

A simple guide on how to send an Angular component to the Nebular dialog service

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the process for including a unique attribute for child elements within a React component using TypeScript?

Interpolating strings in a graphQL query

Tips on transferring information to the graphical user interface

Is there a faster way to create a typescript constructor that uses named parameters?

No slides will be displayed in Ionic 2 once the workout is completed

Issue with BehaviorSubject<Object[]> causing incorrect array data upon initial subscription

The constant value being brought in from an internal npm package cannot be determined

Issues with tracking changes in Vue.js when using reactive variables

What is the procedure for linking the value (<p>John</p>) to the mat form field input so that it displays as "John"?

Modifying the values of various data types within a function

Is there an issue with this return statement?

Can data be filtered based on type definitions using Runtime APIs and TypeDefs?

The component 'ProtectRoute' cannot be utilized within JSX

Why is it that Chart.js fails to render in a child component, yet works perfectly in the parent component?

Error message encountered following the removal of an undesirable type from an array in Typescript

When compiling TypeScript, the exported module cannot be located

Save Component Characteristics in a type-safe array

Struggling to fetch information with Angular HttpClient from an API that sends back a JSON response with an array

Creating a type-safe dictionary for custom theme styles in Base Web

What is the process for converting this lambda type from Flow to TypeScript?