How to size a modal by ts file ionic 4

I would like to size a modal from the TS File and not by the Global SCSS File.

There is a simple code where you size the modal by the Global SCSS File.


      <ion-button expand="block" fill="outline" (click)="onModal()">
        <ion-icon name="apps"></ion-icon>

TS File:

     export class HomePage {

      constructor(private modalController: ModalController) {}

      onModal() {
        this.dynamicPreview('Dynamic Modal');

      async dynamicPreview(info: any) {
        const myModal = await this.modalController.create({
        component: DynamicModalPage,
        cssClass: 'dynamicModalCss',
        componentProps: {
            vInfo: info,
        return await myModal.present();


Global SCSS File:

    .dynamicModalCss {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        position: absolute;
        contain: strict;
        display: flex;
        justify-content: center;
        align-items: center;

        .modal-wrapper {
            width: 20rem;
            height: 40rem;

I have no idea about how to do this :frowning:

Thanks for your suggestions and help

You send your css as props and render that in the component.

Can I ask why do you want to do it in typescript instead of CSS? also, why are you putting that CSS in the global.scss file instead of the component CSS file?

Yes you can :slight_smile:

Because I want to change the size of it (width and height) and I can’t know the size before I get information about what I will display.
I hope it makes sense .

A simple example. A picture can have different size, and you don’t know the size of it until you have it.

For your second question. If I don’t put the modal css in the global.scss file I will not be able to give it another size. Just the full screen.
And it’s the only way I know :frowning:

You could also let your modal grow as big as your content (for example the image). In that case the browser does the heavy work.