Search⌘ K
AI Features
Home
Courses
Developing Mobile Apps with Ionic and Angular

Solution #2: Modify the Icons

Explore modifying icons in an Ionic attendance app to reflect student presence and gender dynamically. Learn to update icon types and colors in Angular templates for a customized user interface.

We'll cover the following...

Solution

import { AppPage } from './app.po';

describe('new App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });
  describe('default screen', () => {
    beforeEach(() => {
      page.navigateTo('/Inbox');
    });
    it('should say Inbox', () => {
      expect(page.getParagraphText()).toContain('Inbox');
    });
  });
});
Solution: Modify the Icons

Explanation

  1. The absent/present icons can be changed through the following steps:

    • In Roster.page.ts file, on line 33 and 39, replace the eye and eyeOffOutline icons with checkmark-circle-outline and close-circle-outline respectively. This will import the new icons into our application, thereby replacing the old icons with the new ones in our actionSheet menu.
    • In
...