Adding Functionality to the Student Roster

Learn how the UI of an Ionic and Angular application can be enhanced.

If you were a teacher and this were a real class of students, there are a number of things you would want to be able to do with your app. A few of those things are:

  • Mark Absent or Present.

  • Navigate to a detail page to see or edit the information that is not present on the list.

  • Remove a student from the class, with the appropriate warnings, of course.

In this chapter, you will enhance the UI of the Roster Page to do all of these things.

The first thing I want to do is add a menu to each student in the ion-list. You can either create the menu first or the button to launch the menu first. Here, we will create the menu first. For that, you are going to use an ion-action-sheet.


An action sheet is a menu that displays like a dialog. It often contains at least two (but usually more) action buttons that are contextually related in some way. In our case, the context is that of the currently selected student.

An ion-action-sheet is Ionic’s specific implementation, rendering an action sheet that automatically looks great on an iPhone or Android.

Get hands-on with 1000+ tech skills courses.