Gain insights into developing hybrid mobile apps with Ionic and Angular. Discover platform-specific UI elements, and build a functional attendance app for your portfolio and deployment.

angularIonic4.tar.gz

ionic-app

ionic-test

AngularApp

The Ionic Framework is an open-source SDK for hybrid mobile app development. It’s known for providing platform-specific UI elements through a library of native components for iOS and Android.

In this course, you will cover all the most important aspects of development with Ionic and Angular. Throughout, you will work to build a fully functional attendance application that you can add to your portfolio.

By the end, you will have the confidence and the means to create and deploy your own mobile app for iOS or Android.

Developing Mobile Apps with Ionic and Angular

# Problem statement

The toast notification you added to indicate that a student was deleted from the roster positions itself at the top of the screen, stays for 3000 ms (3 seconds), and then vanishes. It cannot be manually dismissed by the user. And sometimes, it can be a little hard to see in its default color and position. Your challenge is to fix that.

1. Change the duration of the toast to 5 seconds.

2. Add a close button so the user can close the toast sooner. Toast buttons are configured the same way that Action Sheet buttons are. Hint: Use a role rather than a handler.

3. Move the toast to the bottom or middle of the screen using its position attribute.

4. Change its color.

After implementing the above-mentioned features on the toast, it would look like this:


Follow the instructions to modify the delete toast in this challenge.

Introduction to Ionic Framework

Hello Ionic!

Building an Attendance Application

Improving the UI

Apply What You Have Learned

Conclusion

Appendix – Installing the Tools

Challenge #1: Modify the “Delete” Toast

Problem statement