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

It seems that every page needs a header with a title and menu button. For a demo application with only two pages, copying and pasting the header code might be acceptable. As your app grows, this might become a burden. Create a custom component that includes a menu button, with a title you can pass as an attribute.

# Coding exercise

The complete application is provided below. Write your code where you feel necessary to complete the challenge. It is recommended​ that you try solving the exercise yourself before viewing the solution.

> **Note:** Creating a custom header component requires some new files so we have added `header.component.ts`, `header.module.ts`, and `header.component.html` in the `src > app/` folder and you can implement these files yourself.

Modify the application by including a custom header component.

Introduction to Ionic Framework

Hello Ionic!

Building an Attendance Application

Improving the UI

Apply What You Have Learned

Conclusion

Appendix – Installing the Tools

Challenge #5: Header Component

Problem statement