Developing Mobile Apps with Ionic and Angular/

...

/

Solution #5: Header Component

Solution #5: Header Component

This lesson gives a detailed review of the solution to the challenge in the previous lesson.

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: Add Header Component

Explanation

Requirements: 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.

Here’s how we did this:

  • To create a new Header component, create three new files header.component.ts, header.module.ts, and header.component.html in the src > app/ folder. These three files define the HeaderModule which exports the Header component. The details of these three files are the following:

    • ...