# Using yarn create
yarn create @angular <project-name>
cd <project-name>
or
# Using npm create
npm create @angular <project-name>
cd <project-name>
optionally installing the tooling directly:
# Installing the tooling directly
npm install -g @angular/cli
ng new <project-name>
cd <project-name>
The Angular CLI's new
command will set up the latest Angular build in a new project structure.
ng add @angular/fire
Now that you have a new project setup, install AngularFire and Firebase from npm. This will complete the following tasks:
- Add Firebase config to environments variables
- Configure
@NgModule
for theAngularFireModule
Open /src/app/app.component.ts
, and make the following changes to :
import { Component, inject } from '@angular/core';
import { Firestore } from '@angular/fire/firestore';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
firestore: Firestore = inject(Firestore);
constructor() {
}
}
In /src/app/app.component.ts
:
import { Component, inject } from '@angular/core';
import { Firestore, collection, collectionData } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
firestore: Firestore = inject(Firestore);
items$: Observable<any[]>;
constructor() {
const aCollection = collection(this.firestore, 'items')
this.items$ = collectionData(aCollection);
}
}
Open /src/app/app.component.html
:
<ul>
<li class="text" *ngFor="let item of items$ | async">
{{item.name}}
</li>
</ul>
ng serve
Your Angular app will compile and serve locally, visit it we should find an empty list.
In another tab start adding data to an items
collection in Firestore. As we're not authenticating users yet, be sure to start Firestore in test mode or allow reading from the items
collection in Security Rules (allow read: if true
).
Once you've created a items
collection and are inserting documents, you should find data streaming into your Angular application and being rendered in your browser.
Finally, we can deploy the application to Firebase hosting:
ng deploy