Changing a field in a Firestore document to a boolean results in the type being converted to a

I manually created this Firestore document using the console, setting enabled as a boolean type. Now, I am expanding on the functionality to update it in Angular with the following code snippet.

  activateMenuItem(venueId: string, menuId: string, menuItemId, enabled: boolean) {
    const update = {
      'enabled': false
    };

    update.enabled = enabled;
    const db = this.firestore.firestore;
    from(db.collection('venues')
      .doc(venueId)
      .collection('menus')
      .doc(menuId)
      .collection('items')
      .doc(menuItemId)
      .update(update))
      .subscribe(value => {
        console.log("On next");
      }, (error) => {
        console.log("on error" + error);
      });
  }

Everything is functioning correctly, however, when I assign the boolean value to the field enabled, the field type changes to a string afterward.

Before

https://i.sstatic.net/YMIzw.png

After

https://i.sstatic.net/ZsSSp.png

Here is additional code showing how it is being called:

  onChange(enabled) {
    console.log("Changing " + enabled);
    this.service.activateMenuItem(this.venueId, this.menuId, this.menuItemId, enabled);
  }

Answer â„–1

After a discussion with a commenter, it was determined that the true answer pertains to the following:

  onChange(enabled) {
    console.log("Changing " + enabled);

    this.service.activateMenuItem(this.venueId, this.menuId, this.menuItemId, enabled);
  }

It appears that since I am passing this field down as a boolean, the type information remained a string.

I came across a related article shortly after, which provided a practical solution.

Simply labeling it as an enabled type was not sufficient. It needed to be converted into a Boolean object.

This adjustment ensured that the firestore document retained its original data type.

    const update = {
      'enabled': false
    };

    update.enabled = Boolean(enabled);

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

typescript - add a global library import statement to every script

Recently, I began working on a TypeScript project in Node.js. I am looking to add import 'source-map-support/register'; to all of my .ts files for better visibility of TS source in stack traces. Is there a method to implement this without manuall ...

What are the best ways to incorporate a theme into your ReactJS project?

Looking to create a context for applying dark or light themes in repositories without the need for any manual theme change buttons. The goal is to simply set the theme and leave it as is. Currently, I have a context setup like this: import { createContext ...

While utilizing Typescript, it is unable to identify changes made to a property by a

Here is a snippet of code I am working with: class A { constructor(private num: number = 1) { } private changeNum() { this.num = Math.random(); } private fn() { if(this.num == 1) { this.changeNum(); if(this.num == 0.5) { ...

Submit the request when the fileReader's onload event is triggered

Do you have any suggestions on how to improve my fileReader for uploading images? I am currently facing an issue where multiple requests are being sent to the server when there are more than 1 image due to a for loop. How can I modify my code to address ...

Attempting to limit the user's input to only the beginning of the string

To prevent unexpected data from affecting the database and front end display, I am looking to limit users from inputting a negative sign at the beginning of their number only. My attempted solution so far: if(e .key Code == 109) { return ; } ...

What is the best way to fetch multiple values using momentjs from firebase?

After fetching data from Firebase and storing it in an array, I am attempting to retrieve the posted_at values (timestamp of when something was posted) in a time format using Vuejs. However, I am facing difficulty as it only retrieves a single value instea ...

Strategies for preventing profanity in Typescript within Nuxt 2 implementation

implement user authorization functionality create the Auth class for authentication handling import type { Context } from '@nuxt/types'; export class Auth { public ctx: Context; constructor(ctx: Context) { t ...

Is it possible to conceal my Sticky Div in MUI5 once I've scrolled to the bottom of the parent div?

Sample link to see the demonstration: https://stackblitz.com/edit/react-5xt9r5?file=demo.tsx I am looking for a way to conceal a fixed div once I reach the bottom of its parent container while scrolling down. Below is a snippet illustrating how I struct ...

How to pass an object between two Angular 2 components without a direct connection

My application is structured in the following way. <app> <header> <component-a></component-a> </header> <div> <router-outlet></router-outlet> <component-b></component-b> ...

Using Bootstrap 4 Datatablejs within an Angular4 CLI project

Just finished developing a web application using Angular 4 and Angular CLI tool. Currently, I am trying to display a table with DataTableJs on one of the pages of my app. However, the styling is not coming out as expected. https://i.stack.imgur.com/H5IIT ...

The mat table is not displaying the values from the API despite receiving the correct array

I recently made the decision to dive into learning Angular, but I've encountered some difficulties. Specifically, I'm struggling to populate a table with values retrieved from an API using MatTable. Despite receiving the correct values from the A ...

Encountering an endless loop within a data rest API in a React application

Currently, I am in the process of learning React and attempting to utilize the Poke API with my application. Unfortunately, I seem to have run into an infinite loop issue and I am feeling quite lost in terms of troubleshooting it. Below is a snippet of my ...

Generate an Observable within the Service containing a fresh value, then utilize it in separate components for access

I'm facing an issue with accessing the Observable value from a Service in multiple components. Below is my attempted approach: // DataService code @Injectable({ providedIn: 'root', }) export class DataService { data$; constructor() { ...

Addressing problems with data updates and subscriptions in Angular and NgRx

I'm currently using Angular 11 along with NgRx-Data version 10.1.2, and I have implemented the smart component/dumb component design pattern. When navigating from my 'list' view to a detail page by selecting an item, I pass the item id as a ...

I'm having trouble getting my Ionic Angular App to start up properly. When I try to launch it, it just gets stuck on the splash screen and displays an error message saying "ReferenceError

The challenge I am facing involves developing an IOS app using ionic v7 and angular v15.2. While the app functions smoothly in the browser, upon deployment to my iPhone (iphone 13 pro, running IOS 15.6), I encounter a perplexing error message within XCode: ...

Searching for an Angular component in Selenium

After reviewing the HTML code snippet below, <div class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"> ::before </div> I attempted to locate this element using Selenium C# with the followin ...

The Chrome developer console is alerting that the Typescript file needs to be updated and is currently

Just made an update to my typescript file in my app and ran it. Source maps are enabled. When I check in Chrome by pressing F12 and browsing to the script, I see the .ts file without the recent function I added, but the .js file does have it. I tried fo ...

The dragToZoom property on Google line Chart is malfunctioning with version 45

When utilizing the current version of Google line charts, I have noticed that the drag to zoom property in options is not functioning properly. google.charts.load('current', { packages: ['corechart'] }) However, when I sw ...

Guide to retrieving specific information from a JSON file in an Angular application

Struggling with handling this JSON file [ [ { "category": "Bags", "productData": [ { "id": 1000, "name": "Tro ...

Error during Ng 16 upgrade - npm ERR! Peer dependency conflict found: @angular/[email protected]

I am currently in the process of upgrading my Angular version from 11 to 16. While this Angular documentation has been quite helpful, I am encountering various errors and challenges. Let me provide you with the versions I am working with: Angular CLI: 11. ...