Exploring the wonders of Angular 2: Leveraging NgbModal for transclusion within

Question

Exploring the wonders of Angular 2: Leveraging NgbModal for transclusion within

If I have a modal template structured like this:

<div class="modal-header">
  <h3 [innerHtml]="header"></h3>
</div>

<div class="modal-body">
  <ng-content></ng-content>
</div>

<div class="modal-footer">
</div>

and I'm calling this modal from another component like so:

    const modalRef = this.modalService.open(MobileDropdownModalComponent, {
      keyboard: false,
      backdrop: 'static'
    });

    modalRef.componentInstance.header = this.text;

How can I include HTML with bindings inside NgbModal and pass it to the ng-content tag?

javascript angular typescript ng-bootstrap ng-modal

Answer 1

Answer №1

To access the component instance from NgbModalRef after using the open method, simply set the binding within that instance.

Below is an example of the method used to open the modal:

open() {
   const instance = this.modalService.open(MyComponent).componentInstance;
   instance.name = 'Julia';
 }

Here is the MyComponent that will be shown in the modal with a single input binding:

export class MyComponent {
   @Input() name: string;

   constructor() {
   }
 }

===

You can also pass a templateRef as input. For example, if the parent component contains:

<ng-template #tpl>hi there</ng-template>


 export class AppComponent {
   @ViewChild('tpl') tpl: TemplateRef<any>;

  constructor(private modalService: NgbModal) {
  }

 open() {
    const instance = 
    this.modalService.open(MyComponent).componentInstance;
     instance.tpl = this.tpl;
  }
}

And here is the code for MyComponent:

export class MyComponentComponent {
  @Input() tpl;

  constructor(private viewContainerRef: ViewContainerRef) {
  }

  ngAfterViewInit() {
     this.viewContainerRef.createEmbeddedView(this.tpl);
  }
}

Answer 2

To access the component instance from NgbModalRef after using the open method, simply set the binding within that instance.

Below is an example of the method used to open the modal:

open() {
   const instance = this.modalService.open(MyComponent).componentInstance;
   instance.name = 'Julia';
 }

Here is the MyComponent that will be shown in the modal with a single input binding:

export class MyComponent {
   @Input() name: string;

   constructor() {
   }
 }

===

You can also pass a templateRef as input. For example, if the parent component contains:

<ng-template #tpl>hi there</ng-template>


 export class AppComponent {
   @ViewChild('tpl') tpl: TemplateRef<any>;

  constructor(private modalService: NgbModal) {
  }

 open() {
    const instance = 
    this.modalService.open(MyComponent).componentInstance;
     instance.tpl = this.tpl;
  }
}

And here is the code for MyComponent:

export class MyComponentComponent {
  @Input() tpl;

  constructor(private viewContainerRef: ViewContainerRef) {
  }

  ngAfterViewInit() {
     this.viewContainerRef.createEmbeddedView(this.tpl);
  }
}

Exploring the wonders of Angular 2: Leveraging NgbModal for transclusion within

Answer №1

Similar questions

Angular 14 - Issue with passing values through props - Error: Uncaught (in promise): InvalidCharacterError occurs when attempting to set attribute with 'setAttribute' method

How can I determine if a URL in react js includes a specific string?

While using jQuery, it was discovered that the name attribute could be changed within the .each() function when working in console.log. However

Updating line connections between objects in Three.js while rendering

Can anyone help me figure out the best way to test for observable errors in Angular2?

Having Trouble with Shopify's Asynchronous Ajax Add to Cart Feature?

When you attempt to upload an MP3 file to a NodeJS Express server, the file becomes

Having issues with the functionality of the Previous/Next button in my table

I am looking to create an extension that can automatically paste text from a variety of lists, but unfortunately, I am struggling to get it up and running correctly

Using Subject to send information between components that are not directly related

Customize the border style for the span element

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Is there a way to determine if an element has been scrolled past?

Web application is not making API calls

Customize the asset path location in Webpack

The icon on my page is not displaying, and the responsive menu is also not appearing

Enhance your TypeScript arrays using custom object equality functions

Comparing NativeScript and Flutter

Exploring the depths of nested data retrieval using the fp-ts library: a labyrinth

When working on a MEAN web application, encountering HTTP responses like 403 or 500 from the Express server can sometimes go unnoticed and not be properly handled in the errorCallback function within