Return document/collection as object using AngularFireStore

Question

I'm editing the question to make it more clear :

Using this code will return a Promise, very useful in some case. Service.ts :

async getElement(id: string): Promise<AngularFirestoreDocument<Element>> {
   return this.firestore.doc<Element>(`/element/${id}`);
}

I'm looking for a way to return it as an object so it not linked with firebase anymore.

Here is my page.ts

async ngOnInit() {
   this.elementId = this.route.snapshot.paramMap.get('id');
   this.elementService.getElement(this.elementId).then(element$ => {
      this.element= element$.valueChanges();
   });
}

Any ideas on how to do it ?

I want to be able to do (off-line) operations like

this.element.name = 'New name';

and

{{element.name}}

I also have the same question for collections.

Luis Reinoso · Accepted Answer · 2021-01-19 20:04:23Z

3

It looks like you are using AngularFire

On document.service.ts

constructor(private firestore: AngularFirestore) { }

addDocument(document: DocumentInterface): Observable<any> {
  this.documentCollection = this.firestore.collection(`documents/`);
  return from(this.documentCollection.add(document));
}

To use it just inject documentService service.

constructor(private documentService: DocumentService) {
}

createDocument(document: DocumentInterface) {
  this.documentService.addDocument(document).subscribe(() => console.log('Success'), () => console.log('error'))
}

More info on docs

answered Jan 19, 2021 at 20:04

Luis Reinoso

7584 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Max Over a year ago

Hey, thank you for your help, I tried your code but I couldn't make it work. I edited the question so it's more clear. Thanks.

Sergey Mell · Accepted Answer · 2021-02-06 16:41:25Z

3

+25

If I understood you correctly you want to get a document, break the connection with the firebase and use it as a simple javascript object. In this case your document fetching flow should look as follows:

this.firestore.doc('path/to/doc').get().toPromise().then(res => {
  this.doc = res.data();
});

For collections the implementation is pretty similar

this.firestore.collection('/path/to/collection').get().toPromise().then(res => {
  this.collection = res.docs.map(d => d.data());
});

In this case, you're getting a simple javascript object as this.doc and array in this.collection which you can use as you want. However, none of your changes will affect firebase entities in the cloud directly. You'll need to create separate methods for this.

Please, let me know if I understood you correctly and my answer helps or you have some questions remaining.

edited Feb 6, 2021 at 16:41

answered Feb 6, 2021 at 15:58

Sergey Mell

8,0501 gold badge29 silver badges53 bronze badges

3 Comments

Sergey Mell Over a year ago

@Max, did you have a chance to check my answer? Does it work for you or some additional info required?

Max Over a year ago

Hello, sorry for delayed, I was afk. Yes, this is the correct way to do it. I use this way to store the doc data into my service. Unfortunately I'm also looking for a way to use this data in my page. For example how to use 'this.docservice.doc' as an angular thing, like {{ doc.name }}. Maybe I need to subscribe to it, I don't really know. Do you have an answer ? Forgive my bad english, thank you.

Sergey Mell Over a year ago

You can inject your service into a component via public access modifier and then render in HTML directly object from service i.e. {{ myService.doc }}

Kenneth Clarkson · Accepted Answer · 2021-02-06 16:19:29Z

0

valueChanges returns and observable so you need to render it using the async pipe

{{ (element | async)?.name }}

If you want to update it locally, you need to subscribe

this.firestore.doc(`/element/${id}`).valueChanges()
.pipe(
  take(1)
)
.subscribe(doc => {
  this.element = doc;
});

answered Feb 6, 2021 at 16:19

Kenneth Clarkson

614 bronze badges

Collectives™ on Stack Overflow

Return document/collection as object using AngularFireStore

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related