updating firebase data using Angular

Currently, I am attempting to insert a new object into my Firebase database 

export class AppComponent {
  courses$: AngularFireList<any[]>;
  course$;ang
  author$

  constructor(db: AngularFireDatabase) {
    this.courses$ = db.list('/courses');
    this.course$ = db.object('/courses/1').valueChanges();
    this.author$ = db.object('/authors/1').valueChanges();
  }

  add(course: HTMLInputElement) {
    this.courses$.push(course.value);
    course.value = '';
  }

}

However, while doing so, I encountered the following error:

[ts] Argument of type 'string' is not assignable to parameter of type 'any[]'

angulartypescriptfirebasefirebase-realtime-database

Answer №1

completed

export class AppComponent {
  courses$: Observable<any[]>;
  course$;
  author$

  constructor(public db: AngularFireDatabase) {
    this.courses$ = db.list('/courses').valueChanges();
    this.course$ = db.object('/courses/1').valueChanges();
    this.author$ = db.object('/authors/1').valueChanges();
  }

  add(course: HTMLInputElement): void {
    this.db.list('/courses').push(course.value);
    course.value = '';
  }

}

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

Grouping elements of an array of objects in JavaScript

I've been struggling to categorize elements with similar values in the array for quite some time, but I seem to be stuck Array: list = [ {id: "0", created_at: "foo1", value: "35"}, {id: "1", created_at: "foo1", value: "26"}, {id: "2", cr ...

javascriptarraysangulartypescript

Choose a value, then multiply it by a number using a reactive

I have been attempting to multiply a fixed value by the selected value of a mat-select element, for example A x B, where A remains constant and does not change while B is the changing value from the mat-select. After performing this multiplication, I aim ...

angulartypescript

I keep encountering the following error message: " ERROR Error Code: 200 Message: Http failure during parsing for http://localhost:3000/login"

My Angular Login component is responsible for passing form data to the OnSubmit method. The goal is to send form data from the front-end application and authenticate users based on matching usernames and passwords in a MySQL database. ***This login form i ...

javascriptnode.jsjsonangulartypescript

Exploring ways to capture all console outputs or retrieve the current console content in frontend development

Currently working with Angular and looking to integrate a bug reporting feature into my application. I want to capture the content of the browser's console for debugging purposes. However, I'm unsure of how to access it. Not all errors are logge ...

javascriptnode.jsangular

Container that has the ability to store objects conforming to specific interfaces

If you were to envision having three different types of objects, they might look something like this: interface X { testX: someType; } interface Y { testY: someOtherType[]; } interface Z { testZ1: string; testZ2: number; } Now imagine a master o ...

typescript

Executing the Onclick event within a primeNG menu bar

Need help with triggering the On-click event in PrimeNG? If you're looking to navigate to the UserFormComponent.html page and add a new user when clicking on the 'New' menu bar using PrimeNG, here's how you can achieve it: You can fin ...

angularprimeng

The Vue component's TypeScript object prop type does not match the expected value

Having trouble with the type of Object properties in Vue Single File Components using TypeScript (created with Vue CLI 3)? Check out the example below to see the issue. The type of this.product is currently showing as (() => any) | ComputedOptions<a ...

typescriptvue.js

What is the proper way to add additional properties to an array object when initializing it in TypeScript?

Is there a more elegant solution for creating an object of type: type ArrayWithA = [number, number, number] & { a: string }; I accomplished this by: const obj : any = [1, 2, 3]; obj.a = "foo"; const arrayWithA : ArrayWithA = obj as ArrayWith ...

typescript

Angular 8 combined with Mmenu light JS

Looking for guidance on integrating the Mmenu light JS plugin into an Angular 8 project. Wondering where to incorporate the 'mmenu-light.js' code. Any insights or advice would be greatly appreciated. Thank you! ...

javascriptangulartypescript

Angular reactive forms - validate on both change and blur events with real-time feedback

In my application, I am utilizing angular reactive forms to handle validations. The specific requirement I have is that certain validations should be triggered on change, which is the default behavior of angular form validation, while others should only oc ...

angularvalidation

Leveraging the power of both IntelliJ and AngularCLI 6 to effortlessly import libraries using their package names

My Angular CLI 6 project consists of two components: A library containing services and components A project that utilizes this library When integrating the library into the frontend project, I typically use: import { SomeLibModule } from "some-lib"; H ...

angularintellij-ideaangular-cliwebstormangular-cli-v6

"Looking for a way to create a new line in my particular situation. Any tips

Here is the code snippet I am working with: let list: Array<string> =[]; page.on('request', request => list.push('>>', request.method(), request.url()+'\\n')); page.on('respon ...

javascripttypescript

Injecting a service into a parent class in Angular 6 without the need to pass it through the constructor

Can anyone provide guidance on how to incorporate a service with multiple dependencies into an abstract class that will be inherited by several classes, in a more streamlined manner than passing it through all constructors? I attempted to utilize static m ...

angulartypescriptdependency-injection

Managing different authentication methods for a single user on Firebase: Tips and Strategies

Currently, I am in the process of developing an authentication system utilizing Firebase. My aim is to incorporate email/password, Google, and Facebook as sign-up and sign-in methods. Initially, everything runs smoothly when a user signs up using each met ...

javascriptreactjsfirebasefirebase-authentication

Is it possible to apply filters to individual columns in a dynamic mat table using Angular?

Does anyone know how to add a filter for each dynamic column in an Angular Material table? I've only found solutions for static headers, but my table headers are constantly changing. I'm looking for something similar to this example: https://i.st ...

angulartypescript

Unable to establish headers once they have been issued - routing error

I have come across various solutions for this problem, but I am struggling to resolve it on my own. Therefore, I am sharing my code here in hopes of receiving assistance. I am new to this and would appreciate any help in understanding and fixing the issue ...

node.jsangularexpress

How to extract IDs from a URL in Angular

I'm facing an issue with retrieving the first id from an image URL. Instead of getting the desired id, I am receiving the one after the semicolon ("id" = 1). I have tried various methods but haven't been successful in resolving this issue. Any su ...

javascriptangular

The fixed header option is not available for the CdkVirtualScrollViewport

Looking for a solution in my Angular application where I need to keep the table header at a fixed position while displaying the scrollbar only on the body part. Currently, I am utilizing the CdkVirtualScrollViewport library in Angular to render the table c ...

angularangular-materialangular-cdk-virtual-scroll

Exploring the depths: Retrieving nested object attributes using ngFor

Trying to display the "type" value in the ngFor table resulted in receiving object '[object Object]' of type 'object.' NgFor only supports binding to Iterables such as Arrays. json [{ "id": 123, "name": "Paul", "cars": { ...

htmljsonangular

Back up your Firestore data automatically using scheduled cron jobs!

Recently, I utilized the firestore-backup-restore tool for backing up Firestore data and it worked seamlessly. However, I am unsure how to schedule this process using cron jobs or a similar method. As someone with no prior experience in utilizing cron jobs ...

angularfirebasecronionic3google-cloud-firestore