Layout Setup In Ionic With Angular

Ionic Framework provides several different layouts that can be used to structure an app.

using this article, you will easily set up your layout in an ionic application

Step 1:-

Set Up Ionic in your environment

Step 2:-

Create a new blank project using the following command

ionic start layout-setup

Change application folder using the following command

cd layout-setup

Step 3:-

First, Add three-component to a component folder using the following command

ng g c component/header
ng g c component/footer
ng g c component/navbar

Add shared.modules.ts  module in your component folder and add the following code

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { HeaderComponent } from './header/header.component';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    FormsModule,
  ],
  declarations: [
    HeaderComponent,
    NavbarComponent,
    FooterComponent
  ],
  exports: [
    HeaderComponent,
    NavbarComponent,
    FooterComponent
  ],
  providers: [],
})
export class SharedModule {}

Step 4:-

Add the following code in your footer.component.html

<ion-footer>
  <ion-toolbar>
    <ion-title>Footer</ion-title>
  </ion-toolbar>
</ion-footer>

Step 5:-

Add the following code in your header.component.html

<div id="main-content">
  <ion-header>
    <ion-toolbar>
      <ion-item>
        <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>Inbox</ion-title>
      </ion-item>
    </ion-toolbar>
  </ion-header>
</div>

Step 6:-

Add the following code in your navbar.component.html

<div>
  <ion-menu side="start" content-id="main-content">
    <ion-header>
      <ion-toolbar translucent>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-list>
        <ion-item>
          <ion-icon name="balloon-outline" ></ion-icon>
          <ion-label>First </ion-label>
        </ion-item>
        <ion-item>
          <ion-icon name="basketball-outline"></ion-icon>
          <ion-label>Second </ion-label>
        </ion-item>
        <ion-item>
          <ion-icon name="chatbubble-outline"></ion-icon>
          <ion-label>Third </ion-label>
        </ion-item>
        <ion-item>
          <ion-icon name="clipboard-outline"></ion-icon>
          <ion-label>Forth </ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-menu>
</div>

Step 7:-

Add the following code in your home.module.ts

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 { SharedModule } from '../component/shared.module';

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

Step 8:-

Add the following code in your home.module.ts

<app-header></app-header>
<app-navbar></app-navbar>
<ion-content>
    <div>
        write here
    </div>
</ion-content>

<app-footer></app-footer>

Step 9:-

Run your ionic application using the following command

npm start