Ngx-bootstrap: Change the size of a modal when using bsModalref

[kue-bano]

please when using bsModalRef, how do i set the size of the modal......in the other methods i simply add the class "modal-sm" or "modal-lg" to the parent div.

[IlyaSurmay]

We have this in demo http://valor-software.com/ngx-bootstrap/#/modals#service-options
When creating a modal, pass your class to options like this:
this.modalService.show(template, {class: 'modal-lg'});

[kue-bano]

Thanks.

[aCodeAlchemist]

@IlyaSurmay how do I pass data along with options?

[chandan4u]

Thanks

[chandan4u]

thanks :)

[IamDeshRaj]

@shreejibawa like this : -
const initialState = {
title: this.writer.firstName,
writer: this.writer,
writerFullName: this.writerFullName,
contentList: this.contentList,
writerProfileActive: true,
smallInfoActive: false
};
this.bsModalRef = this.modalService.show(WriterInfoComponent, {initialState, class: 'modal-lg'});

[aCodeAlchemist]

I will try this one and let you know @DESHU44 thanks.

[rajureddy2010]

We have this in demo http://valor-software.com/ngx-bootstrap/#/modals#service-options
When creating a modal, pass your class to options like this:
this.modalService.show(template, {class: 'modal-lg'});

can we use both class in same , this will applay dynamically , when it comes to small and large screen ,, is possible ---class: 'modal-lg, model-sm'}

[nitin466]

We have this in demo http://valor-software.com/ngx-bootstrap/#/modals#service-options
When creating a modal, pass your class to options like this:
this.modalService.show(template, {class: 'modal-lg'});
@IlyaSurmay
this.modalService.show() function takes only 2 parameters , the moment I give 3rd params(i.e template, initialState, {class: 'modal-lg'}, my IDE starts giving error.
Please suggest how to pass initialState as well as class for large modal...Thanks !

[gnchiesa]

@nitin466 took me a while to figure it out, but a quick loko thriugh the source gave me an idea:

const modalOptions = {
initialState: {
title: 'some title',
otherData: 'some other value'
},
class: 'custom-width-class'
};
this.bsModalRef = this.bsModalService.show(SampleComponent, modalOptions);

so this way you can have data sent to the modal, and you can get it there in the form of @Input as usual and at the same time have some custom styling. For the styles, I've came across this piece of gold:
https://stackblitz.com/edit/ngx-bootstrap-3erfzm?file=app%2Fapp.component.ts

credit goes to user ConnorsFan here: https://stackoverflow.com/questions/47957036/way-to-add-custom-class-when-using-ngx-bootstrap-modalservice

hope this helps