[Angular] Component Header 변경

ionic 차례

$ ionic g component header

$ touch src/app/components.module.ts

 

src/app/home/home.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      HELLO
    </ion-title>
  </ion-toolbar>
</ion-header>

home.page.html 상단의 위 코드를 cut해서 src/app/header/header.component.html 파일에 paste 합니다.

 

src/app/components.module.ts

import { NgModule } from '@angular/core'
import { IonicModule } from '@ionic/angular'
import { HeaderComponent } from './header/header.component'

@NgModule({
    declarations: [HeaderComponent],
    imports: [IonicModule],
    exports: [HeaderComponent]
})
export class ComponentModule{}

 

src/app/home/home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';
import { ComponentModule } from '../components.module'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ComponentModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

src/app/home/home.module.html

<app-header></app-header>

<ion-content>
  <ion-card class="welcome-card">
    <img src="/assets/shapes.svg" alt=""/>
    <ion-card-header>
      <ion-card-subtitle>Get Started</ion-card-subtitle>
      <ion-card-title>Welcome to Ionic</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>
        Now that your app has been created, you'll want to start building out features
        and components. Check out some of the resources below for next steps.
      </p>
    </ion-card-content>
  </ion-card>

  ....

 

Header가 변경되었습니다.

 

Order Header 변경

src/app/account/order/order.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { OrderPageRoutingModule } from './order-routing.module';

import { OrderPage } from './order.page';
import { ComponentModule } from '../../components.module'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    OrderPageRoutingModule,
    ComponentModule
  ],
  declarations: [OrderPage]
})
export class OrderPageModule {}

src/app/account/order/order.module.html

<app-header></app-header>

<ion-content>

</ion-content>

 

MyAccount Header 변경

src/app/account/my-account/my-account.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { MyAccountPageRoutingModule } from './my-account-routing.module';

import { MyAccountPage } from './my-account.page';
import { ComponentModule } from '../../components.module'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    MyAccountPageRoutingModule,
    ComponentModule
  ],
  declarations: [MyAccountPage]
})
export class MyAccountPageModule {}

src/app/account/my-account/my-account.module.html

<app-header></app-header>

<ion-content>

</ion-content>

 

ionic 차례