Lesson Outline

Building a Complex Component

We've discussed a lot of different concepts in isolation, but so far we haven't looked at any in-depth practical examples. In this lesson, we are going to put what we have learned into practice by building a complex component that uses the following concepts:

• Using ElementRef and Renderer to safely update the DOM
• Proving a component with input
• Content projection
• Getting a reference to projected content with @ContentChildren
• Using a QueryList

We will be building the ExpandableHeader component that we have referenced previously, but we will be building the entire component from scratch. This is what the component will allow us to do:

We will be able to add content to the header section of our page templates, and as we scroll down the page the header will shrink and any items inside of the header will disappear.

This is a particularly good example to use because it covers such a broad range of concepts, and the end result is quite impressive!

Generating the Component

We will first need to generate the component, which we can do by running:

ionic g component components/ExpandableHeader

You will also need to make this component available to the page you will be using it in by adding it to the module file for that page, e.g:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';

import { HomePageRoutingModule } from './home-routing.module';
import { ExpandableHeaderComponent } from '../components/expandable-header/expandable-header.component';

@NgModule({
  imports: [CommonModule, FormsModule, IonicModule, HomePageRoutingModule],
  declarations: [HomePage, ExpandableHeaderComponent],
})
export class HomePageModule {}

If you prefer, you can instead set the component up using one of the other methods we discussed in the Setting up Components and Directives lesson (e.g. using a shared component module).

Using the Component

I find that it is helpful when designing a new component to pretend that it already exists, and use it in the manner that you would like it to work. When the component is finished, we want to be able to use it inside of an <ion-header> like this:

<ion-header>
  <app-expandable-header [scrollArea]="myContent">
    <ion-item>
      <ion-label><ion-icon name="search"></ion-icon></ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label><ion-icon name="funnel"></ion-icon></ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
  </app-expandable-header>

  <ion-toolbar>
    <ion-title> Ionic Blank </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" #myContent> </ion-content>

This can help guide the build process for the content. We want the header to expand and shrink in response to the user scrolling the content area, so we need to supply the component with a reference to that content area - we do so above by using a #myContent template variable and then supplying that as an input called scrollArea.