BASH

1% npm i -g @angular/cli

BASH

1% ng new haddley-angular

BASH

1% ng deploy

TEXT

1import { Component, OnInit } from '@angular/core';
2import { Auth } from '@angular/fire/auth';
3
4@Component({
5  selector: 'app-dashboard',
6  templateUrl: './dashboard.component.html',
7  styleUrls: ['./dashboard.component.scss']
8})
9export class DashboardComponent implements OnInit {
10
11  user = this.auth.currentUser;
12
13  constructor(private auth: Auth) { }
14
15  ngOnInit(): void {
16    console.log(this.auth.currentUser);
17  }
18
19}

TEXT

1<div class="container my-5">
2
3    <p>dashboard works!</p>
4
5    <div *ngIf="user">
6        User {{ user.email }} is logged in.
7    </div>
8
9    <ul>
10        <li *ngFor="let message of messages$ | async">
11          {{ message.text }}
12        </li>
13      </ul>
14
15    <form [formGroup]="createMessageForm" (ngSubmit)="onSubmit()">
16        <div class="mb-3">
17            <label for="exampleInputMessage1" class="form-label">Message</label>
18            <input type="text" class="form-control" id="exampleMessage1" aria-describedby="messageHelp"
19                formControlName="message">
20            <div id="messageHelp" class="form-text">Enter message here.</div>
21        </div>
22        <button type="submit" class="btn btn-primary">Save</button>
23    </form>
24</div>

TEXT

1import { Component, OnInit } from '@angular/core';
2import { Auth } from '@angular/fire/auth';
3import { Firestore, addDoc, collection, collectionData, getFirestore, query, serverTimestamp, where } from '@angular/fire/firestore';
4import { FormBuilder, FormGroup, Validators } from '@angular/forms';
5import { Observable } from 'rxjs';
6
7@Component({
8  selector: 'app-dashboard',
9  templateUrl: './dashboard.component.html',
10  styleUrls: ['./dashboard.component.scss']
11})
12export class DashboardComponent implements OnInit {
13
14  user = this.auth.currentUser;
15  createMessageForm!: FormGroup;
16  messages$: Observable<any[]>;
17
18  constructor(private formBuilder: FormBuilder, private auth: Auth, firestore: Firestore) {
19    this.createMessageForm = this.formBuilder.group({
20      message: formBuilder.control('', [Validators.required, Validators.minLength(6)])
21    })
22    const uid = this.auth.currentUser?.uid;
23    const result = query(collection(firestore, 'messages'), where("uid", "==", uid));
24    console.log(result);
25    this.messages$ = collectionData(result);
26  }
27
28  ngOnInit(): void {
29    console.log(this.auth.currentUser);
30  }
31
32  public onSubmit(): void {
33    this.saveMessage(this.createMessageForm.value.message)
34    this.createMessageForm.reset();
35  }
36
37  // Saves a new message to Cloud Firestore.
38  private async saveMessage(messageText: string) {
39    try {
40      const uid = this.auth.currentUser?.uid;
41      await addDoc(collection(getFirestore(), 'messages'), {
42        uid: uid,
43        email: this.auth.currentUser?.email,
44        text: messageText,
45        timestamp: serverTimestamp()
46      });
47    }
48    catch (error) {
49      console.error('Error writing new message to Firebase Database', error);
50    }
51  }
52
53}