Angular 4 + Bootstrap Component Modal

Question

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?

Thanks for the answer @Aravind, but i'm using ngx-bootstrap, not ng2-bootstrap :) — jarodsmk
ng2-bootstrap has been deprecated and renamed as ngx-bootstrap — Aravind
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 :( ng-bootstrap.github.io/#/home — jarodsmk
What differences you find in using it. Can you please help me to understand it — Aravind

jarodsmk jarodsmk · Accepted Answer · 2017-07-11T12:17:54

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.

Angular 4 + Bootstrap Component Modal

1 Answers