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
– jarodsmk, Commented Jul 10, 2017 at 7:51
ng2-bootstrap has been deprecated and renamed as ngx-bootstrap — Aravind
– Aravind, Commented Jul 10, 2017 at 7: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 :( ng-bootstrap.github.io/#/home — jarodsmk
– jarodsmk, Commented Jul 11, 2017 at 10:09
What differences you find in using it. Can you please help me to understand it — Aravind
– Aravind, Commented Jul 11, 2017 at 10:37

jarodsmk · Accepted Answer · 2017-07-11 12:17:54Z

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.

answered Jul 11, 2017 at 12:17

jarodsmk

2,1192 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4 + Bootstrap Component Modal

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related