HomeНаука и техникаRelated VideosMore From: Paul Halliday

Ionic 3 - Modal Implementation

504 ratings | 56689 views
My Learn Ionic 3 From Scratch Course - https://www.udemy.com/learn-ionic-3-from-scratch/?couponCode=IONIC3MAY Support the content: https://www.patreon.com/PaulHalliday - EXCLUSIVE early access to the next video(s), as well as other benefits! Ionic 3 - Modal Implementation This video is a preview from the "Learn Ionic 3 From Scratch" course. We look at the ModalController within Ionic 3, and how we can use it in a variety of situations. The extra epic content always comes via email first. Sign up so you're not left behind: http://eepurl.com/cBCqO9 You can also find me: http://twitter.com/PWHSoftware http://linkedin.com/in/paulhal
Html code for embedding videos on your blog
Text Comments (63)
Paul Halliday (1 year ago)
This is a preview of the "Learn Ionic 3 From Scratch" course. Want to get it whilst it's in early access? You can. https://www.udemy.com/learn-ionic-3-from-scratch/?couponCode=LEARNIONIC3
Paul Halliday (1 year ago)
Happy to do bespoke code reviews as part of Patreon: https://www.patreon.com/PaulHalliday :)
Software Engineer (1 year ago)
Hey do you know Do anyone know about "ERROR: Cannot authenticate via a web browser"? $cordovaOauth.facebook(fb_app_id, ["email"]).then(function(result) { auth.$authWithOAuthToken("facebook", result.access_token).then(function(authData) { console.log(JSON.stringify(authData)); }, function(error) { console.error("ERROR: " + error); }); }, function(error) { console.log("ERROR: " + error); });
Natalia Vergara (2 months ago)
hey Paul I've a question, if I want many Modals in my App, I have to create a page for each one? what is it the best way to create them?
John Biddulph (3 months ago)
Hi Paul, this doesn't work, I get : [object Object] in my console
John Biddulph (3 months ago)
so I got to 06:40 and my console was logging out an array dictionary [] and not the actual object, Can you please help, my data is in a forEach: getPosts() { this.posts = [] let loading = this.loadingCtrl.create({ content: "Loading Feed..." }) loading.present() let query = firebase.firestore().collection("posts").orderBy("created", "desc").limit(this.pageSize) query.get() .then((docs) => { docs.forEach((doc) => { this.posts.push(doc) }) loading.dismiss() this.cursor = this.posts[this.posts.length -1]; }).catch((err) => { console.log(err) }) } openModal() { const mapModal = this.modal.create('MapPage', { data: this.posts }); mapModal.present(); }
Muhammad Ammar (4 months ago)
Amazing explanation. Thanks for the tutorial.
Juan Pike (5 months ago)
that was a very helpful trick at 10:23 to view the interface, thanks!
IT k (5 months ago)
am I the only on who can't use backdrop when browser changed to android, ios version?
Dnomasorneiluj (6 months ago)
Hi Everyone, enableBackdropDismiss: false option is not working for me, i have always a 100%height for my modal, i can't see the backdrop. any idea? thx
Michel Chilito (7 months ago)
Muchas gracias, me sirvió muchísimo. Saludos desde latinoamerica.
WiNNiep00h (7 months ago)
i dont get it. how the home.ts knows what is the ModalPage without importing anything? i tried the same but i get error when calling openModal because the modalPage is not known EDIT: Anyway...i solved my problem. i had to import the modal dialog to app.modules.ts and my home.ts and than i didnt write the name as string inside the create('nameModalDialog'') i typed create(nameModalDialog). this worked for me
This actually helped me thanks. Been wondering the same since it is not stated if its lazy loaded or not.
Frederik Hansen (9 months ago)
Brilliant guide man, thanks, it helped a lot. Thumbs up from Denmark
Nilesh Bandekar (9 months ago)
do u have list of any build in animations used for modal in ionic 3
Armando Zabala (9 months ago)
hello Paul good morning I hope you can help me, I'm using ion-select in my app but on iOS device does not work on Android if it works without problems, which can be the problem does not work either in xcode emulator or real device (iphone 8)
Armando Zabala (9 months ago)
Is Ionic 3
Felipe Lima (9 months ago)
And what if a modal page starts from a tab icon? I am facing some problems with that situation...
Rajesh Babu (11 months ago)
hi thanks for this tutorial, how we can create different size three models in one application
Muma David Bwalya (11 months ago)
This is top notch stuff! Thank you!
Phil (1 year ago)
Thank you very much, it helped me a lot. I didn't know how to return data from a dismiss view, tks for that.
JinAnn Leong (1 year ago)
Nice tutorial~ Thank mate.
Paul Halliday (1 year ago)
Thank you!
CarouselBlind (1 year ago)
some how the backdrop is not working its always fullscreen
İlhan Sağlık (1 year ago)
I want to add a product line in Modal and I want to send this product to the main page. I did it with dismiss, but modal also works at cancel yada close. I just want to send data to the main page when I click on the add button in modal and turn off modal.
Jhonatas Rosendo (1 year ago)
When you are dismissing with the cancel button, just pass no data to it. On your onDidDismiss check if the data exists or is undefined. If it is undefined, then the modal was canceled. If not, the product was added.
sharutzagmail (1 year ago)
Love you! Saved me a lot of time of searching for an urgent solution! Thank you!
Sourish Dutta (1 year ago)
Thank you so much sir,you are awesome,do a video on ionic LinkedIn and Twitter authentication
Tejram Chafle (1 year ago)
Thank you so much.. This helped me lot.. I was struggling to receive data from modal to parent class.
Serkan ÜNAL (1 year ago)
Hi Paul, In your example, you created to ModalPage as lazy load with modal-page.module.ts. But your Home Page don't have its own .module.ts. How did you manage this? I know that if you are using lazy loading you have to add module.ts per page. Im confused.
Jhonatas Rosendo (1 year ago)
The home page is not lazily loaded because it will aways be loaded when the app launches, therefore it doesn't need a module.ts.
Ali Alsed (1 year ago)
Thank you for great tutorial! high recommendation to your course and i register in your Course , i want to ask u about create youtube downloader by ionic how can i create it
Laurence Guevarra (1 year ago)
Paul i wanna resize the modal , how do you resize the modal or do you have a lesson about it. by the way i watch your videos in udemy
Fernando Espinoza (1 year ago)
You are the best! Nice video
hanzo2001 (1 year ago)
Not really lazy loaded since it was all declared in AppModule. Try opening a Modal in a lazily loaded Page, both from another module. You'll get the quasi-meaningless _No component factory found for Modal. Did you add it to entryComponents?_
moycs777 (1 year ago)
very good tutorial!
Matt Green (1 year ago)
Thank you very much. Love the speed, and succinctness
Paul Halliday (1 year ago)
Thanks Matt! Here's a discount code for my latest course: Master Ionic 3 with Ionic Native and Cordova Integrations - https://www.udemy.com/master-ionic-3-with-ionic-native-and-cordova-integrations/?couponCode=IONICNATIVE
Samuel Huang (1 year ago)
Come back here again & thanks your video again! very helpful.
Taehwa Kim (1 year ago)
I came here because ionic doc wasn't enough to make me understand fully. After watch the video I could understand a lot better. Thanks!
Paul Halliday (1 year ago)
Awesome! You may find the course useful which contains more content like this: https://www.udemy.com/learn-ionic-3-from-scratch/?couponCode=IONIC3MAY :)
Laura Alvarez (1 year ago)
What editor are you using?? Thanks!
Paul Halliday (1 year ago)
Visual Studio Code! :) https://code.visualstudio.com/
I Janghee (1 year ago)
Hello Paul, can't we need to add ";" after myModal.onDidDismiss() at 9:00? :) Great video!
Paul Halliday (1 year ago)
Hi Jang, Nicely spotted! We should indeed. Paul
JS ! (1 year ago)
Gr8 tutorial !!
Paul Halliday (1 year ago)
I'm glad you liked it Siddharth! :)
JS ! (1 year ago)
just a little bit noise reduction required
Paul Halliday (1 year ago)
Gotcha.
JS ! (1 year ago)
Thank you Paul for listening my feedback related audio. Now it loud and clear.
Paul Halliday (1 year ago)
Always looking to improve!
GIRAFFE KING (1 year ago)
yo, do a tutorial on testing pls
Paul Halliday (1 year ago)
Certainly will! I'm working on a variety of testing lectures for the course as we speak. :)
Sampath Lokuge (1 year ago)
Hey Paul, Really nice work. Thanks for sharing with us :) Do you have a video about Ionic 3 Deep Linking?
Sampath Lokuge (1 year ago)
Oh.. Excellent.I'll see there :)
Paul Halliday (1 year ago)
Some deep linking content is being added to the course today. It should be up as part of the new section by the end of the weekend. :)
Fede Sardo (1 year ago)
Hi Paul, how are you doing? I am following your course in udemy and I have a quick (and maybe stupid question), I can not see the difference between use modal and "navController.push" .
Paul Halliday (1 year ago)
Hi Fede, It's a similar process, essentially instead of pushing the view to be the new page, we're showing that page as a modal instead. Paul
Fede Sardo (1 year ago)
are the same Paul?
Fede Sardo (1 year ago)
are the same Paul?
James West (1 year ago)
Top banana
Adir Zoari (1 year ago)
Thank you for great tutorial! high recommendation to your course
Paul Halliday (1 year ago)
Thanks a lot! :)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.