CODEWITHSUNDEEP
javascriptangularionic2
Consta Gorgan
Consta Gorgan

Reputation: 589

How can I dynamically create a modal with a specific class in Ionic 2?

Hi I have been stuck with a problem for days now, and so far no research has proved sufficient. I am trying to create a simple modal in Ionic 2 with a specific class (or id).

I need something as simple as this:

<ion-modal class="myDifficultToAddClass">
...
</ion-modal>

This is my code:

import { NavParams, ModalController } from 'ionic-angular';
@Component(...)
class PageBehindTheModal {
  constructor(public modalCtrl: ModalController) {

  }
  presentProfileModal() {
    let profileModal = this.modalCtrl.create(Profile, { randomData: randomData });
    profileModal.present();
  }
}

@Component(...)
class Profile {
  constructor(params: NavParams) {
    console.log('Some info: ', params.get('randomData'));
  }
}

I have tried to encapsulate the view with ViewEncapsulation from angular/core in order to use a local css, but this css will be available globally (and I cannot "style" only this particular modal - so this is not a solution):

import { ViewEncapsulation } from '@angular/core';
@Component({
  styleUrls: ['./product-details.scss'],
  encapsulation: ViewEncapsulation.Emulated
})

I was hoping to find a simple solution like:

// create(component, data, opts)
create(Profile, { randomData: randomData }, { cssClass: 'myDifficultToAddClass' })

Unfortunately, my wish didn't come true :).

Does anyone know how to do this?

Upvotes: 2

Views: 4690

Answers (2)

99tharun
99tharun

Reputation: 1216

You can now pass a CSS class name as an optional parameter when creating the modal.

  presentProfileModal() {
    let profileModal = this.modalCtrl.create(Profile, { 
      randomData: randomData }, {
      cssClass: 'myDifficultToAddClass'
    });
    profileModal.present();
  }

Find the official documentation here

Upvotes: 5

misha130
misha130

Reputation: 5726

You can try to add a selector to your component

@Component({
    templateUrl: 'modal.html',
    selector:'somemodal',
})

And now you can set all your css on the element somemodal

somemodal {
    // dostuff
}

Upvotes: 2

Related Questions