callHelpCenter(){
let alert = this.alertCtrl.create({
subTitle: 'Help Center',
message: "<p (click)='callEn()'>Phone number 12345</p>",
buttons: ['Dismiss']
)}
}
callEn(){
console.log('clicked');
}
As I have written above code, I want to handle the event on clicking of the message <p>. Tag it's showing in DOM properly but not able to call the function (click)='callEn()' . So how can I handle on click of message of the custom alert in ionic?
Related
I am working on a Doctor Appointment App. I have a collection view in which cells are time slots. User can select time slot based on date of his favour.I placed a button under the collection view and after clicking that button user moves to next viewController. I want to show alert on clicking a button if user doesn't select any time slot. I tried a lot but not finding a solution. Thanks in advance....
check the screenshot of my view. Hoping someone would help me....
proceed as following:
#IBAction func buttonPressed(_ sender: Any) {
if timeSlotsCollectionView.indexPathsForSelectedItems == [] {
let alert = UIAlertController(title: "DID NOT SELECT A TIME SLOT", message: "Please select a time slot!", preferredStyle: UIAlertControllerStyle.alert)
alert.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.default, handler: nil))
self.present(alert, animated: true, completion: nil)
}
}
Good luck with your App
I am using Ionic 2 and angular 2 for application development . I created popup using ionic-angular modal.I need navigation from popup to other page using ionic navigation( push ) method. But 'its not working on my end. The next page is loading in same component.
My code
For opening popup
openModal() {
let myModal = this.modalCtrl.create(CreateModal);
myModal.present();
}
this function will open the popup. In popup html i have on click function.
<h2 (click)="goTonext()" data-dismiss="create-modal" >Next page</h2>
The click function
goTonext() {
this.viewCtrl.dismiss();
this.navctrl.push(NextPage
, {
id: res.status
}
);
}
this function will close the popup and loading the next page in same page.
It's not loading next page separately.
Please help!!!
When you are calling this.view.dismiss() it is closing the modal.
If you want to do some action after dismiss, you can do it in onDidDismiss() of the modal.
In your original component,
openModal() {
let myModal = this.modalCtrl.create(CreateModal);
myModal.onDidDismiss(data=>{
if(data){
this.navctrl.push(NextPage
, {
id: data.status
}
}
);
});
myModal.present();
}
Send the res in dismiss function call.
this.viewCtrl.dismiss(res);
I have a component which is my main interface. Inside this component, clicking a button opens ionic 2 modal which allows to choose items.
My modal page (itemsPage):
..list of items here
<button ion-button [disabled]="!MY_TURN || !selectedItem || !selectedItem.quantity"
(click)="useItem(selectedItem)">
<span>Choose item {{selectedItem?.name}}</span>
</button>
useItem() should:
Send item data to my main interface component
Close the modal
Execute a method in my main interface
How I can perform such actions? Couldn't find any documentation about communicating between modal and component in Ionic 2.
It is simply a matter of using parameters in viewController.
In your main interface component,
let chooseModal = this.modalCtrl.create(itemsPage);
chooseModal.onDidDismiss(data => {
console.log(data);
});
chooseModal.present();
In your modal page,
useItem(item) {
this.viewCtrl.dismiss(item);
}
Modal Controller link here
This is a clear example of getting data from modals in ionic.
You need to add a handler for modal’s onDismiss() and then return the data from the modal itself by passing the data to the ViewController’s dismiss() method:
// myPage.ts
// Passing data to the modal:
let modal = Modal.create(myModal, { data: [...] });
// Getting data from the modal:
modal.onDismiss(data => {
console.log('MODAL DATA', data);
});
this.nav.present(modal);
on the modal page
// myModal.ts
constructor(private navParams: NavParams, private viewCtrl: ViewController) {
// Getting data from the page:
var dataFromPage = navParams.get('data');
}
dismiss() {
// Returning data from the modal:
this.viewCtrl.dismiss(
// Whatever should be returned, e.g. a variable name:
// { name : this.name }
);
}
I have an ionic2 application with angular2, at one page I inject LoadingController and make use of it, at different location on my app.ts I catch all global http errors and want to display alert so I inject AlertController there .
So having 2 location which can at some point call a modal dialog creation and present it causing a problem that freezes the screen , I believe it is because there are 2 modals being open one on the other.
Is there any chance I can grab the current dialog and close it, or add param to create which closes any background modal ?
This is my code:
export class SandboxPage implements OnInit {
private _loadingModel;
constructor(private _navCtrl:NavController, private _alertCtrl:AlertController , private _loadingCtrl: LoadingController ) {
}
ngOnInit() {
this._loadingModel = this._loadingCtrl.create();
this._loadingModel.present();
let alert = this._alertCtrl.create({
title: 'Error',
message:"error message",
buttons: [{
text: 'Ok',
handler: () => {
// user has clicked the alert button
// begin the alert's dismiss transition
let navTransition = alert.dismiss();
}
}]
});
//timeout the error to let other modals finish dismissing.
setTimeout(()=>{
alert.present();
},500);
}
}
The ok click want close the alert model, Here in this example it's on the same page so I can dismiss the loading but when on different components it's not possible to do.
It is not possible to display Google Charts on Android 2.x. The following error message is shown:
Cannot set property 'overflow' of null
Is there any way to show custom div (text) instead of this text?
Most (if not all) charts will throw "error" events, which you can capture with an event handler:
google.visualization.events.addListener(chart, 'error', function (e) {
document.querySelector('#error_div').innerHTML = 'Error: ' + e.message;
});