• Client Panel Angular 13
• Table of Contents
• Introduction
• Functionality
• Features
• Project Images
  • Dashboard
  • Details
  • Edit Details
  • Login
  • New
  • Register
  • Settings
• Tech
  • Firebase Firestore
• Project Setup
  • Google Firebase
• Getting Started - Setting up the Angular Application
  • Building the Components
  • Include the Components in the App
  • Create a new Module of Router
• Installing Firebase
  • Create model

Client Panel application is a built on Boostrap 4 using Angular 13 with a firebase backend. It is used as a client management application and allows users to register, login and log client details and project information to help keep track of project billing.

Once logged in, a registered user can add, edit, and delete clients. The application also allows a to update client profile information and balance owed.

• Enable/Disable Register functionality
• Log Client and Project Details
• Register and Login
• Edit Client Details and Balance
• Firebase storage
• Firebase authentication with username & password

• Custom Auth Guard used
• Services
  • Settings Service
  • Auth Service
  • Client Service
• Models
  • Clients
  • Settings
• Firebase Deployment

• Angular 2 flash messages module

• snapshotChanges()

• Firebase Collections

• Created Firestore Database
• Created collection with two entries. Collection clients
• Firebase credentials are stored in environment.ts file (not included in repo)

{
  "balance": 50,
  "email": "[email protected]",
  "firstName": "Karen",
  "lastName": "Williams",
  "phone": 0872224444
},
{
    "balance": 100,
    "email": "[email protected]",
    "firstName": "John",
    "lastName": "Doe",
    "phone": 0872223334
}

• Authentication
  • Email and Password
  • Create initial user

{
  "email": "[email protected]",
  "password": "password_goes_here"
}

Fireebase/firestore now set up

• Generate new project ng new clientpanel
• Install Dependencies
  • npm i [email protected] jquery popper.js font-awesome
• Open package.json
  • Remove Caret symbol ^ from the following dependencies, that way we are using the exact version of the package
    • bootstrap
• Add the following to angular.json under styles and scripts

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

• ng g c components/navbar --skipTests=true --module=app.module.ts
• ng g c components/clients --skipTests=true --module=app.module.ts
• ng g c components/sidebar --skipTests=true --module=app.module.ts
• ng g c components/add-client --skipTests=true --module=app.module.ts
• ng g c components/edit-client --skipTests=true --module=app.module.ts
• ng g c components/client-details --skipTests=true --module=app.module.ts
• ng g c components/login --skipTests=true --module=app.module.ts
• ng g c components/register --skipTests=true --module=app.module.ts
• ng g c components/dashboard --skipTests=true --module=app.module.ts
• ng g c components/settings --skipTests=true --module=app.module.ts
• ng g c components/not-found --skipTests=true --module=app.module.ts

• In app.component.html add the following

<app-navbar></app-navbar>

• In navbar.component.html add the navbar from bootstrap.

ng g m app-routing --flat --module=app.module.ts

Bring in all modules you want to add to the route app-routing.module.ts

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { DashboardComponent } from "./components/dashboard/dashboard.component";
import { LoginComponent } from "./components/login/login.component";
import { RegisterComponent } from "./components/register/register.component";
import { AddClientComponent } from "./components/add-client/add-client.component";
import { EditClientComponent } from "./components/edit-client/edit-client.component";
import { ClientDetailsComponent } from "./components/client-details/client-details.component";
import { SettingsComponent } from "./components/settings/settings.component";
import { NotFoundComponent } from "./components/not-found/not-found.component";

// Create Routes
const routes: Routes = [
  { path: "", component: DashboardComponent },
  { path: "login", component: LoginComponent },
  { path: "register", component: RegisterComponent },
  { path: "client/add", component: AddClientComponent },
  { path: "client/edit/:id", component: EditClientComponent },
  { path: "client/:id", component: ClientDetailsComponent },
  { path: "settings", component: SettingsComponent },
  { path: "**", component: NotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

• Bring in the links in the navbar

<nav class="navbar navbar-expand-md navbar-dark bg-primary mb-4">
  <div class="container">
    <a routerLink="/" class="navbar-brand">Client Panel</a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarMain"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarMain">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a routerLink="/" class="nav-link">Dashboard</a>
        </li>
      </ul>

      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a routerLink="/register" class="nav-link">Register</a>
        </li>
        <li class="nav-item">
          <a routerLink="/login" class="nav-link">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

• Bring in router-outlet in the app.component.html

<app-navbar></app-navbar>
<div class="container">
  <router-outlet></router-outlet>
</div>

Routing Module Setup Complete

• npm i firebase angularfire2
• From within google console, create a new project and get the config object and add it to the environment.ts file
• Also add the code to the environment.prod.ts file

Normally you have a seperate project for development and production.

export const environment = {
  production: false,
  firebase: {
    apiKey: " ",
    authDomain: " ",
    projectId: " ",
    storageBucket: " ",
    messagingSenderId: " ",
    appId: "",
  },
};

• Import the environment object from src/environments/environment into the app.module.ts file and the following below to get started

import { AngularFireModule } from "@angular/fire/compat";
import { AngularFireAuth } from "@angular/fire/compat/auth";

• Running into issues with packages for firebase

• Create file called Clients.ts inside folder called models in the src/app folder

export interface Client {
  id?: string;
  firstName?: string;
  lastName?: string;
  email?: string;
  phone?: string;
  balance?: number;
}