update the value of a specific document in Firestore by specifying its

Is there a way to update document values in a Firestore collection for multiple records without manually specifying each document ID? Currently, I have a method that works for updating individual documents using their IDs, but what if I need to update a large number of records at once?

https://stackblitz.com/edit/angular-ea3wme

My goal is to have a functionality where clicking on the update button changes the value of the state column to

false</code for the respective row.</p>

<p><a href="https://i.sstatic.net/fAK6A.png" rel="nofollow noreferrer"></a></p>

<p><strong>myService.ts</strong></p>

<pre><code>updateState(){
  // Need code here to update state for all documents
}

myComponent.ts

updateState(){
  // Call updateState function from myService
}

myComponent.html

<td>
    <button class="btn btn-outline-primary btn-sm" (click)="updateState()">Edit</button>
</td>

Answer №1

Make sure your button sends the key when invoking the function, just like this example:

myComponent.html

<td>
   <button class="btn btn-outline-primary btn-sm" (click)="updateStatus(deliveryPerson.id)">Update</button>
</td>

myComponent.ts

updateStatus(key){
    this.deliveryService.updateStatus(key);
}

deliveryService.ts

updateStatus(key){
    this.firestore.doc('deliveryPersons/' + key).update({
      status: false
    })
}

I hope this information is useful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error when sending Angular 4 GET request with multiple Headers results in a 400 bad request code

I've been attempting to perform a POST request with headers in order to receive a response. The Angular code snippet I'm currently using for this request is shown below: const headers = new HttpHeaders({ 'Content-Type': 't ...

How can a parent component update a child component's prop value in VUE?

I'm facing an issue with managing dynamic props in Vue with TypeScript. Below is my parent component: <script setup lang="ts"> const friends = [ { id: "emanuel", name: "Emanuella e", phone: "08788 ...

There is a lack of a service available for AngularFireDatabase

Currently, I am trying to follow a tutorial on creating a chat room application in Angular. Unfortunately, I encountered some issues while setting up AngularFire2. Upon inspecting the package.json file, I noticed that the tutorial is using version 4.0.0-r ...

There appears to be an issue with the headers not being

Whenever I use HttpClient to send a request, I make sure to set the necessary headers. However, upon checking the network tab in Chrome, I noticed that these headers are not being properly set. Here is the code snippet: request(url: string, method: strin ...

Exploring the use of generic types in TypeScript interfaces

I have the following two interfaces: export interface TestSchema<S> { data: S; description: string; } export type someType = 'option1' | 'option2'; export interface AnotherInterface { primary: string; secondary: someType; ...

Jasmine: A guide to mocking rxjs webSocket

Here is my chat service implementation: import {webSocket, WebSocketSubject} from 'rxjs/webSocket'; import {delayWhen, retryWhen, take} from 'rxjs/operators; import {timer} from 'rxjs; ... export class ChatConnectionService { priva ...

Extending a type by adding properties from separate files using TypeScript

I am faced with a situation where I have a file containing either a type or interface variable (all of which are exported), and I need to add new properties to this variable from different files without using extends. Essentially, making changes to the sam ...

Update an API call to switch from promises to observables, implementing axios

Recently, I have been experimenting with using rxjs for API requests in a React application and this is the approach that I have come up with. What are your thoughts on this method? Are there any best practices that you would recommend following? If you ...

Problems encountered when utilizing $in operator in Mikro ORM MongoDB operations

For my project, I'm utilizing mikro orm with MongoDB to handle database operations in TypeScript. So far, it has proven to be the most effective ORM for MongoDB in this language. However, I've encountered type errors when using $in with Object ID ...

When declaring an array of numbers in sequelize-typescript, it triggers a TypeScript error

In my application, I am working with PostgreSQL, Sequelize, Sequelize-TypeScript, and TypeScript. I have a need for a table called Role where each role has multiple permissions of type integer. I'm following the guidelines provided in the sequelize-ty ...

import component dynamically from object in Next.js

Currently, I have a collection of components that I am aiming to dynamically import using next/dynamic. I'm curious if this is achievable. Here's the object in interest: // IconComponents.tsx import { Tick, Star } from 'components ...

Utilizing absolute imports in Typescript directory structure

Our team has a preferred structure for organizing React code, which looks like this: components/ button.tsx slider.tsx index.ts helpers/ math.ts auth.ts index.ts constants/ config.ts api.ts index.ts In this setup, each ...

What is the best way to rid ourselves of unwanted values?

In the laravel-vue-boilerplate package, there is a User CRUD feature. I duplicated this functionality to create an Item CRUD by making some changes and adjustments. Everything is working fine except for one issue: after editing an item, when trying to add ...

How can I uniquely combine a code with an existing CSS class and make modifications to it?

I am using ngx-skeleton-loader and I would like to change the color, but I am facing some difficulties. Here is an image that illustrates the issue. When looking at the developer tools, you can see the styles action in the styles action bar. .loader ...

Step-by-step guide on making a tab the default tab in Angular with the help of Angular Material Tabs

I recently created an Angular application that utilizes the Grid and Tab components from angular material. One unique feature of my app is the data binding I implemented between the grid and tabs, where the number of grid values corresponds to the number ...

How to upload files using 3 input fields in Angular?

Seeking assistance on uploading 3 files using 3 different inputs. I'm a beginner in Angular, so please excuse any naive inquiries. Here is the code snippet: BookFormComponent.ts: export class BookFormComponent implements OnInit { audioFile: File ...

Learning Angular2: What is the mechanism behind the automatic incrementation of the ID variable in this particular section?

In This specific part of the Angular2 Tutorial there is a feature that allows users to add new items to an array. Somehow, when the item is added, the ID is automatically incremented but the exact process behind this automation remains a mystery. I am awa ...

gRPC error: "unable to connect to the specified address" while running a NestJS application on Docker

I am encountering this particular error message when trying to run my NestJS application in a Docker container with gRPC: { "created": "@1616799250.993753300", "description": "Only 1 addresses added ou ...

ejs-lineargauge major divisions and minor divisions centered

I've been trying to align majorTicks and minorTicks in the middle of the axis, but so far I haven't found a solution despite searching and googling extensively. Here's a snippet of my code: majorTicks: { height: 12, interval: 1, width ...

Can you identify the category of the new Set containing the elements 1, 2, and 3?

As a beginner in TypeScript, I'm currently exploring the appropriate type for JavaScript's new Set([1, 2, 3]), but my search has been unsuccessful so far. For instance: const objNums: {[key: string]: number} = {one: 1, two: 2, three: 3}; const a ...