Skip to content

Instantly share code, notes, and snippets.

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img src="<%= name %>" />
</body>
</html>
<h1>Add Student</h1>
<form class="add">
<label for="name">Name</label>
<input type="text" name="name" required [(ngModel)]="studentDetails.name" />
<label for="age">Age</label>
<input type="text" name="age" required [(ngModel)]="studentDetails.age" />
<button type="button" (click)="add()">Add</button>
</form>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-firebase-crud',
templateUrl: './firebase-crud.component.html',
styleUrls: ['./firebase-crud.component.css']
})
export class FirebaseCrudComponent implements OnInit {
studentDetails = {
export const environment = {
production: false,
firebaseConfig: {
apiKey: "-----",
authDomain: "-----",
projectId: "----",
storageBucket: "----",
messagingSenderId: "-----",
appId: "-----"
}
import { Injectable } from '@angular/core';
import { initializeApp } from 'firebase/app';
import { Firestore, getFirestore, collection, addDoc, getDocs, deleteDoc, doc, updateDoc, DocumentData, CollectionReference, onSnapshot, QuerySnapshot } from 'firebase/firestore'
import { Subject } from 'rxjs';
import { environment } from '../environments/environment';
@Injectable({
providedIn: 'root'
})
import { Component, OnInit } from '@angular/core';
import { DocumentData, QuerySnapshot } from '@firebase/firestore';
import { FirebaseService } from '../firebase.service';
@Component({
selector: 'app-firebase-crud',
templateUrl: './firebase-crud.component.html',
styleUrls: ['./firebase-crud.component.css']
})
export class FirebaseCrudComponent implements OnInit {