Retrieving a FirebaseObjectObservable child in Angularfire2 is straightforward

Can you target a specific child of a FirebaseObjectObservable in Angular? Take a look at RcTestAppComponent.save() function below for commented lines.

Here is an example: https://github.com/angular/angularfire2/blob/master/docs/3-retrieving-data-as-lists.md

import { Component } from '@angular/core';
import { AngularFire, FirebaseObjectObservable } from 'angularfire2';

@Component({
  moduleId: module.id,
  selector: 'app',
  template: `
  <h1>{{ item | async | json }}</h1>
  <input type="text" #newname placeholder="Name" />
  <input type="text" #newsize placeholder="Size" />
  <br />
  <button (click)="save(newname.value)">Set Name</button>
  <button (click)="update(newsize.value)">Update Size</button>
  <button (click)="delete()">Delete</button>
  `,
})
export class RcTestAppComponent {
  item: FirebaseObjectObservable<any>;
  constructor(af: AngularFire) {
    this.item = af.database.object('/item');
  }
  save(newName: string) {
    this.item.set({ name: newName });
    /*
      // Is it possible to do something like this:
      let index = 2;
      this.item.child(index).set({ name: newName });
      // index can be dynamic;

      // When attempting to use .child() on this.item, I encounter an error: 
      // TypeError this.item.child is not a function
    */

  }
  update(newSize: string) {
    this.item.update({ size: newSize });
  }
  delete() {
    this.item.remove();
  }
}

Thank you

Answer №1

I discovered a new method to assign an object to a changing path using a different technique.

export class RcTestAppComponent {
  /*
    item;
    constructor(af: AngularFire) {
       this.item = af;
    }
  */
  constructor(af: AngularFire) {
    // This TypeScript approach is more concise compared to the commented lines above. fftopic 
  }
  save(newName: string) {
    let index = 2; // the value changes dynamically
    this.af.database.object('/item/' + index).set({ name: newName };
  }

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

Setting the x-api-key header with HttpInterceptor in Angular 4: A guide

I am attempting to use HttpInterceptor to set the header key and value, but I am encountering the following error: Failed to load https://example.com/api/agency: Response to preflight request doesn't pass access control check: No 'Access ...

Having trouble with [at-loader] while incorporating Typescript and react-bootstrap in webpack?

While working with webpack, I encountered an error message when using a component in react-bootstrap along with typescript. The error displayed is as follows: ERROR in [at-loader] ./node_modules/react-bootstrap/esm/NavbarCollapse.d.ts:4:18 TS2320: ...

Developing an Angular feature to categorize options within a dropdown menu

I am currently working on a project that involves utilizing a lot of data related to selects. Is there a way to organize this data using built-in Angular (5/6?) functions? I attempted to use the ng-select component but it didn't meet my requirements. ...

Avoiding repetitive logic in both parent and child components in Angular 8

In my parent controller, I have common requests and I also read router params for those requests. However, for the child components, I have different requests but still need to extract the same parameters from the router - resulting in duplicate code. For ...

What is the correct way to utilize Array.reduce with Typescript?

My current approach looks something like this: [].reduce<GenericType>( (acc, { value, status, time }) => { if (time) { return { ...acc, bestValue: valu ...

What is the best way to create an Office Script autofill feature that automatically fills to the last row in Excel?

Having trouble setting up an Excel script to autofill a column only down to the final row of data, without extending further. Each table I use this script on has a different number of rows, so hardcoding the row range is not helpful. Is there a way to make ...

What could be causing the failure of the subscribe function to interpret the API response

I want to retrieve user information by using their identification number through a method component.ts identificacion:any = this.route.snapshot.paramMap.get('identificacion'); constructor(private route: ActivatedRoute, private dataService: ...

The air-datepicker functionality seems to be malfunctioning within an Angular 4 environment

When using static HTML, it's quite simple to integrate Air Datepicker by following the documentation available at : <html> <head> <link href="dist/css/datepicker.min.css" rel="stylesheet" type="text/css"> <scr ...

The type 'IContact[]' given does not match the expected type 'FetchContactsSuccessPayload' for the parameter

I've been diving into my project involving react redux-saga with TypeScript and I'm facing an issue with a type error within my saga file. This is my first experience with TypeScript. The error originates from the saga.ts file, specifically this ...

Resolve the upstream dependency conflict that occurs during the installation of ng-bootstrap/ng-bootstrap

Encountering an error while attempting to install npm install --save @ng-bootstrap/ng-bootstrap. Seeking assistance in resolving this issue. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a ...

"Dealing with cross-origin resource sharing issue in a Node.js project using TypeScript with Apollo server

I am encountering issues with CORS in my application. Could it be a misconfiguration on my server side? I am attempting to create a user in my PostgreSQL database through the frontend. I have set up a tsx component that serves as a form. However, when I tr ...

Paths: Integrate a variety of components along with essential information

With 3 components in hand, everything works smoothly when I run them on AppComponent: <app-sections #appSection></app-sections> <app-form #mainForm [section]="appSection.currentSection"></app-form> <app-match [bestMatchHTMLEleme ...

Encountering ECONNREFUSED error when making requests to an external API in a NextJS application integrated with Auth

Currently, I have integrated Auth0 authentication into my NextJS application by following their documentation. Now, I am in the process of calling an external ExpressJS application using the guidelines provided here: https://github.com/auth0/nextjs-auth0/b ...

The onChange function in CustomSelect is triggering an endless loop of renders in a React application using TypeScript and Material-

Currently, I am working with a mui element called CustomSelect. It functions perfectly on desktop, however, the handleChange function from onChange only console logs once. On mobile (even in development mode), it renders 51 times before crashing and displa ...

Compiling in Angular 2 CLI can take up a significant amount of time

Working on a rather large project using Angular 2 along with Angular 2 CLI beta 21, I can't help but be surprised by the significant compilation and updating times. Take a look at the ng serve output - it clocks in at 44.8s. $:ng serve ** NG Live De ...

Tips for customizing the list of components and attributes for each component in the Angular Form.io builder

I have successfully integrated form.io with Angular 10. After creating a demo project using form.io in the Angular CLI, I was able to develop a custom component and customize the editForm for it. import { Injector } from '@angular/core'; import ...

Setting up Windows authentication for an ASP.NET Core 6.0 and Angular project: A complete guide

Attempting to set up Windows authentication with the ASP.NET Core 6 Angular template. Here is the current configuration in use: The following configuration has been added to the program.cs file: // Add services to the container. builder.Services.AddContr ...

The parameter of type 'never' cannot be assigned with the argument of type 'number | boolean | undefined'

In my project, I am creating a validation input using TypeScript in Next.js. interface InputRules { required?: boolean min?: number max?: number minLength?: number maxLength?: number } I have defined an object that contains methods to handle val ...

"What is the best way to prevent a button from being enabled in Angular if a list or array is not

I am incorporating data from my service in the component: ngOnInit() { this._sharedService. getReceiptItem().takeUntil(this.ngUnsubscribe). subscribe(products => this.receiptItems = products); } Is there a way to deactivate a button if there ...

I can't seem to figure out the issue with ngOnit, it

Tried various solutions but still unable to resolve this error. The error I'm encountering is "ngonit is missing in type 'homeController'". Any assistance would be greatly appreciated. import { Component, OnInit, ViewEncapsulation } from & ...