Skip to content
IONIC Chat With Firebase
Branch: master
Clone or download
Latest commit 6256395 May 23, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea README file changes. May 18, 2018
resources first commit May 18, 2018
src Update app.module.ts May 18, 2018
www first commit May 18, 2018
LICENSE Create LICENSE May 18, 2018 Update May 23, 2018
config.xml first commit May 18, 2018
ionic.config.json first commit May 18, 2018
ionic.starter.json first commit May 18, 2018
package.json first commit May 18, 2018
tsconfig.json first commit May 18, 2018
tslint.json first commit May 18, 2018

IONIC chat with firebase

Ionic Firebase Chat is a sample chat widget powered by Firebase.

Technologies used:

  • Ionic Framework (v3)
  • Firebase 3 (we’re not going to use AngularFire)

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. What things you need to install the software and how to install them


First, we need to create new project in firebase

Step 1:

Login with your Firebase ( & create new project

alt text

Step 2:

Click “add firebase to your web app” & get keys

alt text

Creating Ionic Project

Once we created project from firebase, we can set up new Ionic project for our chat application

Create new Ionic project

ionic start  --v2 ionicfirechat blank

Change your working directory

cd ionicfirechat

Add your platform (if required)

ionic platform add android
ionic platform add ios

Installing & Setup Firebase (app.component.ts)

Add firebase node_modules to your project

npm install firebase --save

import firebase in app.component.ts

import * as firebase from 'firebase';

Add configuration to app.component.ts; Replace with your Firebase Configuration

let config = {
 apiKey: 'YOUR_APIKEY',
 authDomain: 'YOUR_AUTH_DOMAIN',
 projectId: 'YOUR_PROJECT_ID',
 storageBucket: 'YOUR_STORAGE_BUCKET',

Creating UI for chat (home.html)


<ion-content padding>
  <div id="chatMessage">
    <div class="message" *ngFor="let message of messages">
      <div [class]="message.userName == user ? 'innerMessage messageRight' : 'innerMessage messageLeft'">
        <div class="userName">{{ message.userName}}</div>
        <div class="msg">{{ message.message}}</div>

    <ion-input type="text" name="message" placeholder="Message" [(ngModel)]="message"></ion-input>
    <ion-buttons end>
      <button ion-button icon-right color="royal" (click)="sendMessage()">
        <ion-icon name="md-send"></ion-icon>

alt text you need to open the src/app/app.module.ts file and replace below code with your configuration settings:

Sending Messages to Firebase When user clicks send button we need to call send() to insert messages into firebase & clear existing messages

      userName: this.user,
      message: this.message
    }).then(() => {
      this.message = ''

Reading Messages from Firebase When user created new message, we need to display inside

 this.db.list('/chat/').valueChanges().subscribe(data => {
      this.messages = data

Running the tests

Run below command line for automated tests of this system

  $ionic serve


CoverFlow is MIT-licensed

Let us know!

We’d be really happy if you sent us links to your projects where you use our component. Just send an email to And do let us know if you have any questions or suggestion regarding our work.

You can’t perform that action at this time.