1

So I'm thinking of implementing a component in an app that can act as a component in a Bootstrap modal as well as a regular child component in a page.

In the example (titled 'Components as content' at the bottom of the page in the link above), the component implemented in your modal requires NgbActiveModal to be added to the constructor of that component. When I attempted to do the above, this prevents my component from being implemented as a regular child component.

Any ideas for getting around something like this without making a wrapper component?

jarodsmk
  • 1,876
  • 2
  • 21
  • 40
  • Have a look at this [**answer**](https://stackoverflow.com/questions/42735858/ng2-bootstrap-show-hide-modal-as-child-component/42736058#42736058) which serves all your needs – Aravind Jul 10 '17 at 07:43
  • Thanks for the answer @Aravind, but i'm using ngx-bootstrap, not ng2-bootstrap :) – jarodsmk Jul 10 '17 at 07:51
  • ng2-bootstrap has been deprecated and renamed as ngx-bootstrap – Aravind Jul 10 '17 at 07:57
  • Right my apologies, I'm using ng-bootstrap (as per the link in my question), unfortunately I still cant use the link you suggested (since that's the Valorsoft bootstrap) which uses different components & classes :( https://ng-bootstrap.github.io/#/home – jarodsmk Jul 11 '17 at 10:09
  • What differences you find in using it. Can you please help me to understand it – Aravind Jul 11 '17 at 10:37
  • Sure thing, so for instance - a parent component can be injected with NgbModal, allowing for the creation of a modal within this component. The modal itself can have a component passed to it, which is what I'm trying to achieve, but still use the component as a regular child component (I.E. without a modal). The child component in this instance (when implementing it within a modal), has to be injected with NgbActiveModal, so you can dictate at what stage to close the modal with (for instance when you select 'save' on a form) – jarodsmk Jul 11 '17 at 10:57
  • Compare what I've mentioned to the link you gave, you can see there are different classes being used, and for my specific project, I can't simply swap the library I'm using unfortunately – jarodsmk Jul 11 '17 at 10:58
  • Also, everything I spoke about in the message I sent a minute ago can be found in the link I placed in my question - under the title 'Components as Content' :) – jarodsmk Jul 11 '17 at 10:59
  • ok I got it. can we sync up after some time. I m at my workplace. – Aravind Jul 11 '17 at 11:04
  • Awesome man, no worries - doing my own experimenting here trying to find a possible solution – jarodsmk Jul 11 '17 at 11:10
  • reach me at fb aravind2109. we will sync up later – Aravind Jul 11 '17 at 11:12

1 Answers1

1

So I managed to find an answer from this post.

By adding the @Optional decorator and modifying your child component to look like the following, you can write additional code to allow it to operate in a modal and as a regular component.

The @Optional decorator in this case will only inject it where the component is called when being used as a modal component. I thought adding the ? parameter modifier would have done the same but apparently not.

...
constructor(@Optional() private activeModal: NgbActiveModal){
    ...
}
    ...
finish(){
    if(this.activeModal){
        this.activeModal.dismiss(data);
    }else{
        //regular component finish code
    }
}

Big thanks to @Aravind for willing to take his own personal time to assist :) Cheers mate.

jarodsmk
  • 1,876
  • 2
  • 21
  • 40