4

I'm trying to make a very simple wrapper around the ng-bootstrap modal service. ng-bootstrap's modal service has an open(content) method that takes in a TemplateRef or a component class meant to be the content of the modal.

What I want is to make my own service that has an open(content) method that takes in a component class and delegates to ng-bootstrap's service. But I want to be able to wrap the content in my own component that supplies some styling and maybe some default header or close button.

My main question is what is the best way to take in the component class supplied as a parameter, wrap it in my own component, then pass that along to ng-bootstrap's service, either as a Component or a TemplateRef. Can it be done? How? If not, what would be an alternative method of achieving what I want.

Here's some pseudocode of what I had in mind.

@Component({
  template: `
    <div class="my-class">
      <!-- projected content -->
    </div>
    <button>Close</button>

  `
})
class ModalWrappingComponent {}

Injectable()
class ModalWrappingService {
  constructor(private modalService: NgbModal) {}

  open(content) { // <- content has to be a component class
    let ref: TemplateRef | a new component class;
    // Somehow make a new component class or TemplateRef from ModalWrappingComponent
    // and the content param
    this.modalService.open(ref);
  }
}
IAfanasov
  • 4,775
  • 3
  • 27
  • 42
snowfrogdev
  • 5,963
  • 3
  • 31
  • 58
  • 1
    See if this can help you, and let me know if it does :) https://blog.ng-book.com/dynamic-components-with-content-projection-in-angular/ – Aviad P. Jul 29 '21 at 05:54
  • @AviadP. That is a great article. I had seen it in my research. It looks a lot like how ng-bootstrap's modal actually works. I know how to dynamically create a component instance using `ComponentFactoryResolver`. My problem is that I can't pass a component instance to NgbModal.open(content), I can only pass either a component class (constructor) or a TemplateRef. – snowfrogdev Jul 29 '21 at 12:25

0 Answers0