arjacsoh arjacsoh - 2 months ago 14
TypeScript Question

Specify ionic component css class in page

I am developing an application with

ionic 2
and
angular 2
and I use in it the
ionic 2
component ModalController.

I did not find a way or a configuration that changes the size of the
ModalController
. I want however to use it on deverse sizes, namely to specify a different size on each page I use it. It gets its size from
ionic 2
css
class
modal-wrapper
. If I override the class or the global variables used to calculate the size, then this adjustment applies globally. In other words it is not modularized in the different pages. I have found that in
angular 2
one can apply style to each component individually:
https://angular.io/docs/ts/latest/guide/component-styles.html#!#using-component-styles

However that did not work in the case
modal-wrapper
. My questions are:


  1. Can one override a standard
    ionic 2
    class this way, or does it only pertain to
    html tags
    ?

  2. Can one apply
    scss
    rules this way? How? The
    modal-wrapper
    defines
    scss
    rules.


Answer

I did not find a way or a configuration that changes the size of the ModalController. I want however to use it on deverse sizes, namely to specify a different size on each page I use it.

Every time a page is shown, a class with the name of the Component of that page is added to the <ion-page> element. For instance, if I create a new Component to use as a Modal called CustomModalPage you will see that in your html a custom-modal-page class is added.

<ion-page class="show-page custom-modal-page "> ... </ion-page>

You can use that class to change the style of a given modal without affecting the rest of modals of the app. Please notice that this is just a workaround that I've found, and I'm not sure if it could break something else somehow.

First I created a page with two buttons, one will open the custom modal, and the other one, just a default modal.

The .html code:

<ion-header>

  <ion-navbar>
    <ion-title>ModalController Demo</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <h5>ModalController with custom size</h5>

    <button (click)="presentCustomModal()">Open Custom Modal</button>

    <button (click)="presentDefaultModal()">Open Default Modal</button>

</ion-content>

The .ts code:

import { Component } from '@angular/core';
import { NavController, ModalController, ViewController } from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/modal-controller-custom-size/modal-controller-custom-size.html',
})
export class ModalControllerCustomSizePage {

    constructor(private navCtrl: NavController, private modalCtrl: ModalController) {

    }

    presentCustomModal() {
        let customModal = this.modalCtrl.create(CustomModalPage);

        customModal.onDidDismiss(() => {
            // Do what you want ...
        });

        // Present the modal
        customModal.present();
    }

    presentDefaultModal() {
        let defaultModal = this.modalCtrl.create(DefaultModalPage);

        defaultModal.onDidDismiss(() => {
            // Do what you want ...
        });

        // Present the modal
        defaultModal.present();
    }

}

/* ********************
    Custom modal 
********************* */
@Component({
    template:   '<ion-header>' +
                    '<ion-navbar dark>' +
                        '<ion-title>My custom modal</ion-title>' +
                        '<ion-buttons end>' +
                            '<button (click)="dismiss()">Close</button>' +
                        '</ion-buttons>' +
                    '</ion-navbar>' +
                '</ion-header>' +
                '<ion-content padding>' +
                    '<h5>Modal content...</h5>' +
                '</ion-content>',
})
class CustomModalPage {

    constructor(public viewCtrl: ViewController) {

    }

    public dismiss() {
        this.viewCtrl.dismiss();
    }
}

/* ********************
    Default modal 
********************* */
@Component({
    template:   '<ion-header>' +
                    '<ion-navbar>' +
                        '<ion-title>Default modal</ion-title>' +
                        '<ion-buttons end>' +
                            '<button (click)="dismiss()">Close</button>' +
                        '</ion-buttons>' +
                    '</ion-navbar>' +
                '</ion-header>' +
                '<ion-content padding>' +
                    '<h5>Modal content...</h5>' +
                '</ion-content>',
})
class DefaultModalPage {

    constructor(public viewCtrl: ViewController) {

    }

    public dismiss() {
        this.viewCtrl.dismiss();
    }
}

Please notice that I've included the two components I use as Modals in the same .ts file just to make this easier to read.

Once we have that, we can change the styles of the custom modal by adding some style rules like this:

.custom-modal-page {
    height: 25%;
    position: absolute;
    top: 75%;

    ion-content {
        background-color: #333;
        color: #eee;
    }
}

Like you can see, those styles are going to be applied only to the custom modal and not the default one. And since we're not modifying the modal-wrapper but we do modify its content, the modal-wrapper will disable the rest of the page until we close the modal.