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

Solution #5: Header Component

Explore how to create a custom header component in Ionic Angular that accepts a dynamic title and menu button. Understand how to modularize this component for reuse across multiple pages, helping you manage common UI elements efficiently as your app grows.

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:

    • ...