Download to read offline
Uploaded bySai Haridass
Angular material,firebase, and angularfire
The document provides an overview of Angular Material, Firebase, and AngularFire, detailing their roles in application development. It covers Angular Material's UI components, Firebase's no backend app development capabilities and Cloud Firestore's rules, as well as how to implement AngularFire for real-time data synchronization and authentication. The document also outlines the process for setting up, accessing, and deploying applications to Firebase hosting.
Angular material,firebase, and angularfire
- 1. Angular Material • Whatis it? UI component library or CDK (Component Development Kit) Angular Component suit @angular/cdk Material Design Style elements @angular/material
- 2. Example of AngularMaterial Components
- 4. Subject, Observers andSubscriptions Observer Subject Subject Observer I am Observer I will do what is needed if my Observable state changes Subscription My Observer subscribed to me at her birth (ngOnInit)
- 5. Creating a Subjectusing RxJs
- 6. . Creating a Observerusing RxJs
- 7. • What isFireBase? A Mobile and Web Application Development Platform • Why FireBase? Develop apps with No Backend
- 8. Creating a projectin FireBase
- 9. Create Database inFireBase (Cloud Firestore)
- 10. Create Database inFireBase (Cloud Firestore)
- 11. • What isCloud FireStore? Cloud-hosted, NoSQL database with Native SDKs for iOS, Android, WebApps, JAVA, etc • Rules of FireStore: • Cannot have collection inside a collection • Collections can only contain Documents • Document can contain Data and sub- connections • Data is Text which is usually key value pairs like JSON • CloudFireStore is not meant to store Files or images only Text Data Anatomy of Cloud Firestore
- 12. Adding Collections, Documentsand Fields
- 13. Grab the APIKey from the Project settings
- 14. Copy paste theAPI key into environment.ts
- 15. What is AngularFire? •Observable based : Use the power of RxJS, Angular, and Firebase • Realtime bindings : Synchronize data in realtime • Authentication : Log users in with a variety of providers and monitor authentication state. • NgRx friendly : Integrate with ngrx using AngularFire’s action based APIs.
- 16. Import AngularFireModule andintializeApp
- 17.
- 18.
- 19. Using AngularFire toretrieve Data as snapshotChanges
- 20. Using AngularFire toretrieve Data as valueChanges collection
- 21.
- 22. snapshotChanges vs valuechangescollection
- 23. What is AngularFireAuth? •Observable based: As
- 24. Setup Authentication inFireBase
- 25. Available options forAuthentication
- 26. Enable Sing-in method:Email/Password
- 27.
- 28. As the apploads ngOnInit call initAuthListener
- 30. Subscribe to AngularFireAuthauthState to redirect accordingly
- 31. Deploying app toFireBase Hosting
- 32. Intall the requiredfirbase-tools
- 33.
- 34.
- 35. Copy api keyto environment.prod.ts
- 37. Application in production •https://ng-fitness-tracker-7d01f.firebaseapp.com/login • Finally App gets deployed