Build Food Delivery App Demo in Angular + Ionic

Hello guys how are you? Welcome back on my blog Therichpost. Today in this post I am going to  Build Food Delivery App Demo in Angular + Ionic.

Ionic is the most popular choice for building mobile apps with Angular. It allows you to create cross-platform apps (iOS, Android, Web) using a single codebase.

Angular 19 came. If you are new then you must check below two links:

• Angular 19 Basic Tutorials
• Free Angular Admins
• Ionic 8

Now guys here is the complete code snippet and please follow carefully:

• Steps to Build a Mobile App with Angular & Ionic:

(a) Install Ionic and Create a Project

npm install -g @ionic/cli
ionic start myApp blank --type=angular
cd myApp
ionic serve

• Create few new pages:

ng generate page contact 
ng generate page about

Now guys lets do the coding :

• Very first guys we need to add below code inside src/app/home.page.ts:

import { Component } from '@angular/core';
import {  IonContent, IonHeader, IonToolbar, IonTitle, IonGrid, IonList, IonRow, IonCol, IonChip, IonIcon, IonLabel, IonItem, IonThumbnail, IonButton, IonSearchbar } from '@ionic/angular/standalone';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  imports: [IonContent, IonHeader, IonToolbar, IonTitle, CommonModule, IonGrid, IonList, IonRow, IonCol, IonChip, IonIcon, IonLabel, IonItem, IonThumbnail, IonButton, IonSearchbar],
})
export class HomePage {
  categories = [
    { name: 'Burgers', icon: 'fast-food' },
    { name: 'Pizza', icon: 'pizza' },
    { name: 'Drinks', icon: 'wine' },
    { name: 'Desserts', icon: 'ice-cream' }
  ];

  popularFoods = [
    { name: 'Cheese Burger', price: 5.99, image: 'assets/burger.jpg' },
    { name: 'Pepperoni Pizza', price: 8.99, image: 'assets/pizza.jpg' },
    { name: 'Coca Cola', price: 1.99, image: 'assets/coke.jpg' },
    { name: 'Chocolate Cake', price: 4.99, image: 'assets/cake.jpg' }
  ];
  constructor() {}
}

• Now guys we need to add below code inside src/app/home.page.ts:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>🍔 Food Delivery</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- Banner Image -->
  <div class="banner">
    <img src="assets/banner.jpg" alt="Food Banner" />
  </div>

  <!-- Search Bar -->
  <ion-searchbar placeholder="Search for food..."></ion-searchbar>

  <!-- Food Categories -->
  <h2>Categories</h2>
  <ion-grid>
    <ion-row>
      <ion-col *ngFor="let category of categories">
        <ion-chip color="secondary">
          <ion-icon [name]="category.icon"></ion-icon>
          <ion-label>{{ category.name }}</ion-label>
        </ion-chip>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- Popular Food Items -->
  <h2>Popular Foods</h2>
  <ion-list>
    <ion-item *ngFor="let food of popularFoods">
      <ion-thumbnail slot="start">
        <img [src]="food.image" />
      </ion-thumbnail>
      <ion-label>
        <h3>{{ food.name }}</h3>
        <p>${{ food.price }}</p>
      </ion-label>
      <ion-button fill="outline" slot="end" color="success">
        Order
      </ion-button>
    </ion-item>
  </ion-list>
</ion-content>

• Now guys we need to add below code inside src/app/home.page.scss:

.banner img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
  }
  
  ion-searchbar {
    margin: 10px 0;
  }
  
  h2 {
    margin: 10px 0;
    color: #ff5722;
  }
  
  ion-chip {
    font-size: 16px;
    margin: 5px;
  }
  
  ion-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
  }
  
  ion-item {
    --inner-padding-end: 10px;
  }
  

• Now guys we need to add below code inside src/app/contact.page.html:

<ion-header>
  <ion-toolbar color="secondary">
    <ion-title>Contact</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <p>Welcome to the Contact page!</p>
</ion-content>

• Now guys we need to add below code inside src/app/about.page.html:

<ion-header>
  <ion-toolbar color="secondary">
    <ion-title>About</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <p>Welcome to the About page!</p>
</ion-content>

• Now guys for routing we need to add below code inside src/app/app.routes.ts file:

import { Routes } from '@angular/router';
import { HomePage } from './home/home.page';
import { AboutPage } from './about/about.page';
import { ContactPage } from './contact/contact.page';

export const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomePage },
  { path: 'about', component: AboutPage },
  { path: 'contact', component: ContactPage },
  {
    path: 'contact',
    loadComponent: () => import('./contact/contact.page').then( m => m.ContactPage)
  },
  {
    path: 'about',
    loadComponent: () => import('./about/about.page').then( m => m.AboutPage)
  },
];

• Now guys for final output we need to add below code inside app.component.html file:

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>
<!-- Navigation Buttons -->
<ion-footer class="app-footer">
  <ion-row class="nav-row">
    <ion-col size="4">
      <ion-button fill="clear" color="dark"  [routerLink]="['/home']">
        <ion-icon name="home-outline"></ion-icon>
        <p>Home</p>
      </ion-button>
    </ion-col>
    <ion-col size="4">
      <ion-button fill="clear" color="dark"  [routerLink]="['/about']">
        <ion-icon name="information-circle-outline"></ion-icon>
        <p>About</p>
      </ion-button>
    </ion-col>
    <ion-col size="4">
      <ion-button fill="clear" color="dark"  [routerLink]="['/contact']">
        <ion-icon name="call-outline"></ion-icon>
        <p>Contact</p>
      </ion-button>
    </ion-col>
  </ion-row>
</ion-footer>

• Guys for style we need to add below code into global.scss file:

.app-footer {
    left: 0;
    bottom: 0;
    position: absolute;
    z-index: 10;
    display: block;
    width: 100%;
  }

This is it guys and for images you can download from github link and link is below and place inside src/assets folder.

Github link for images

Guys for more information feel free to comment below.

Ajay

Thanks