Last active
April 23, 2025 15:43
-
-
Save kavicastelo/739ffa85be5a7be5f30ca3a7fc925add to your computer and use it in GitHub Desktop.
Angular Learning Module 2 (Interns) – Forms + Firebase Firestore
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Routes } from '@angular/router'; | |
| import { ContactComponent } from './contact/contact.component'; | |
| export const routes: Routes = [ | |
| { path: 'contact', component: ContactComponent }, | |
| { path: '**', redirectTo: 'contact' } | |
| ]; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <form [formGroup]="contactForm" (ngSubmit)="submitForm()"> | |
| <label>Name</label> | |
| <input formControlName="name" /> | |
| <div *ngIf="contactForm.get('name')?.invalid && contactForm.get('name')?.touched"> | |
| Name is required. | |
| </div> | |
| <label>Email</label> | |
| <input formControlName="email" /> | |
| <div *ngIf="contactForm.get('email')?.invalid && contactForm.get('email')?.touched"> | |
| Enter a valid email. | |
| </div> | |
| <label>Message</label> | |
| <textarea formControlName="message"></textarea> | |
| <div *ngIf="contactForm.get('message')?.invalid && contactForm.get('message')?.touched"> | |
| Message must be at least 10 characters. | |
| </div> | |
| <button type="submit" [disabled]="contactForm.invalid">Submit</button> | |
| </form> | |
| <p *ngIf="submitted">✅ Thanks for contacting us!</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component } from '@angular/core'; | |
| import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms'; | |
| import { Firestore, collection, addDoc } from '@angular/fire/firestore'; | |
| import { CommonModule } from '@angular/common'; | |
| @Component({ | |
| selector: 'app-contact', | |
| standalone: true, | |
| templateUrl: './contact.component.html', | |
| styleUrls: ['./contact.component.css'], | |
| imports: [CommonModule, ReactiveFormsModule], | |
| }) | |
| export class ContactComponent { | |
| contactForm = new FormGroup({ | |
| name: new FormControl('', Validators.required), | |
| email: new FormControl('', [Validators.required, Validators.email]), | |
| message: new FormControl('', [Validators.required, Validators.minLength(10)]), | |
| }); | |
| submitted = false; | |
| constructor(private firestore: Firestore) {} | |
| async submitForm() { | |
| if (this.contactForm.valid) { | |
| const data = this.contactForm.value; | |
| const contactRef = collection(this.firestore, 'contacts'); | |
| await addDoc(contactRef, data); | |
| this.submitted = true; | |
| this.contactForm.reset(); | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export const firebaseConfig = { | |
| apiKey: "fake", | |
| authDomain: "fake", | |
| projectId: "your-project-id", | |
| storageBucket: "fake", | |
| messagingSenderId: "fake", | |
| appId: "fake" | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { provideFirebaseApp, initializeApp } from '@angular/fire/app'; | |
| import { provideFirestore, getFirestore } from '@angular/fire/firestore'; | |
| bootstrapApplication(AppComponent, { | |
| providers: [ | |
| provideFirebaseApp(() => initializeApp(firebaseConfig)), | |
| provideFirestore(() => getFirestore()), | |
| ... | |
| ], | |
| }); | |
| // Pre Requests: npm install firebase @angular/fire |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment