Saima-Chaity

import { Routes } from '@angular/router';
import { SignupFormComponent } from './app/signup-form/signup-form.component';
import { LoginFormComponent } from './app/login-form/login-form.component';
import { ChatroomComponent } from './app/chatroom/chatroom.component';
import { ProfileSettingsComponent } from './app/profile-settings/profile-settings.component';

export const appRoutes: Routes = [
    { path: 'signup', component: SignupFormComponent },
    { path: 'login', component: LoginFormComponent },
    { path: 'chat', component: ChatroomComponent },

Saima-Chaity

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

Saima-Chaity

<div>
  <div>
      <app-navbar></app-navbar>
  </div>
  <router-outlet></router-outlet>
</div>

Saima-Chaity

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">ChatApp</a>
    <div id="navbarTogglerDemo02" class="navbar-collapse collapse" [ngbCollapse]="isCollapsed">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" *ngIf="!userId" routerLink="/login" ><i class="fa fa-sign-in"></i>Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" *ngIf="!userId" routerLink="/signup"><i class="fa fa-user-plus"></i>Register</a>
        </li>

Saima-Chaity

<div class="form">
    <h2>Sign Up</h2>
    <form #signupForm="ngForm">  
      <div class="form-group">
        <label>Email : </label>
        <br>
        <input 
        type="email" name="userEmail"
        #userEmail="ngModel"
        placeholder="Enter your email address" 

Saima-Chaity

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.css']
})

Saima-Chaity

  signup(email: string, userName: string, password: string) {
    return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
      .then((user) => {
        this.signupAttempt = 1;
        this.authState = user;
        const status = 'online';
        this.setUserData(email, userName, status);
        window.location.reload();
    });
  }

Saima-Chaity

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';
import * as firebase from 'firebase/app';
import { Observable } from 'rxjs/Observable';

@Injectable({
  providedIn: 'root'
})

Saima-Chaity

export class User {
    uid: string;
    userName: string;
    email: string;
    profilePhoto?: string;
    password: string;
    status: string;
}

Saima-Chaity

<div class="container">
    <div class="userProfile">
        <app-user-profile></app-user-profile>
    </div>
    <div class="feed">
        <app-feed></app-feed>
    </div>
    <div class="userList">
       <app-user-list></app-user-list> 
    </div>