Inserting item into an array

Currently, I am storing an array in a Firestore document and I am trying to add another object to it but facing some issues. For instance, value:m1 , status:open

The code snippet below is from home.html, where you can find [(ngModel)]="words2[in].value"

When attempting 

[(ngModel)]="words2[in].value",open.status
, it throws an error

    <form #formRef="ngForm">
        <div *ngFor="let word2 of words2; let in=index" class="col-sm-3">
            <div class="form-group">
              <div class="milestones">
                <ion-input type="text" placeholder="Milestone" 
                [(ngModel)]="words2[in].value" name="name{{in}}" class="form-control" 
                #name="ngModel" required (ionChange)="chng(words2[in].value)"></ion-input>
              </div>
            </div>
            <br />
        </div>
        <button [disabled]="!formRef.form.valid" (click)="add()">Add Milestone +</button>
      </form>
      <br />
      <br />

  <ion-button (click)="CreateNewProject()">
    <ion-icon size="small" slot="icon-only" name="add"></ion-icon>
    &nbsp;Create new Project
  </ion-button>

In home.ts, when creating a record, the approach is to pass this.word2 as shown in the following code:

  CreateNewProject(){
    console.log(this.words2);
    let record = {};
    record['name'] = this.val1;
    record['desc'] = this.val2;
    record['milestone'] = this.words2;
   ...

This is how data is stored in Firestore:

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

angulartypescriptionic-framework

Answer №1

Take a look at this:

dataCollection: any = [];    
AddNewEntry(){
        dataCollection.push({
         title:this.titleValue,
         description:this.descriptionValue,
         date:this.dateValue
       });
   }

You can retrieve the value like for example: dataCollection[0].title;

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

The button fails to log any text to the developer console

Attempting to verify the functionality of my button by logging a message on the developer console. However, upon clicking the button, the text does not appear in the console. import { Component, EventEmitter, Input, Output } from '@angular/core'; ...

javascriptangulartypescript

The issue of importing images in Angular2 using TypeScript with Express is causing problems for Webpack

Having trouble importing images in my headercomponent.ts file. I believe the issue lies in how I am compiling the TypeScript with webpack ts loader, as it works fine with React (where the components are written in es6). The error occurs at: //headercompo ...

expresstypescriptangularwebpackurlloader

What is the reason behind permitting void functions in the left part of an assignment in Typescript?

Take a look at this Typescript snippet: let action = function (): void { //perform actions }; let result = action(); What makes it suitable for the TypeScript compiler? ...

typescript

Setting a default value within a formControl located in a formGroup nested inside a FormArray

Hey there! I'm currently facing an issue with setting a default value for an input type radio within a reactiveForm that is a child component. The parent component has an input, but I'm struggling to set the checked value for the radio button. Ev ...

angularangular-reactive-forms

How can I prevent right-clicking with Ctrl+LeftMouseClick in Firefox on MacOS?

I'm looking to implement a shortcut using Ctrl+LeftMouseClick in my React project. It functions perfectly on Chrome on my Mac, but in Firefox the shortcut initiates a right mouse click (event.button = 2). I believe this may be due to MacOS's Rig ...

javascriptreactjstypescriptkeyboard-shortcutsmouseclick-event

Error: Unable to assign generic type due to type mismatch

I'm struggling to understand the type error generated by the following code. Can anyone point out what I might be doing incorrectly? Type '(state: State) => State' is not assignable to type 'Action'. Types of parameters &apos ...

typescript

Are child routes permitted to be utilized without the need for router outlets, specifically for tab contents within a main component?

Can different components be rendered for each tab in a tab menu without using router outlets? Within my parent component, there is a template containing a tab menu component with each tab item having an ng template associated with it. I have set the tabs p ...

angularroutesrouter-outlet

What is the secret to planning an event that spans a significant period of time?

Let's say there's this div in the code: <div [hidden]="!isNotificationDisplayed" class="notification"> <h2 align="center" class="set-margin" #notification>Node was...!</h2> <h4 alig ...

javascriptangulartypescript

Navigating after a button is clicked in Angular Material 2 tabs can be achieved by utilizing the router module in

Currently, I am utilizing Angular Material 2 tabs and have the desire for a next button in one tab that would navigate to another tab upon clicking. What specific element or function should I implement to accomplish this desired functionality? ...

angularangular-material2

What is the best way to indicate a particular element within a subdocument array has been altered in mongoose?

I have a specific structure in my Mongoose schema, shown as follows: let ChildSchema = new Schema({ name:String }); ChildSchema.pre('save', function(next){ if(this.isNew) /*this part works correctly upon creation*/; if(this.isModifi ...

javascriptnode.jsmongodbtypescriptmongoose

Encountering the error message "Receiving 'Multiple CORS header 'Access-Control-Allow-Origin' not allowed' while accessing my Laravel API from Angular"

After successfully developing an API with Laravel that functioned perfectly with Postman, I am now working on its front-end using Angular. However, I keep encountering this error every time I send a request to the API: Cross-Origin Request Blocked: The Sa ...

angularlaravelrestcors

In order to showcase the data from the second JSON by using the unique identifier

SCENARIO: I currently have two JSON files named contacts and workers: contacts [ { "name": "Jhon Doe", "gender": "Male", "workers": [ "e39f9302-77b3-4c52-a858-adb67651ce86", "38688c41-8fda-41d7-b0f5-c37dce3f5374" ] }, { "name": "Peter ...

jsonangulartypescriptangular6

Cross-origin error triggered by using an external API within a ReactJS application

I'm facing a common CORS issue in my application while trying to call an API. The API I am attempting to access can be found here: https://github.com/nickypangers/passport-visa-api Below is the code snippet used for making the API call: const getVi ...

reactjstypescript

An error is encountered during the production build of an Angular library

I am facing an issue with my Angular 9 library that I am trying to push to a registry. After running ng build <my-lib>, it builds successfully, but gives a warning about Ivy: ************************************************************************* ...

angularng-packagr

The `NgForOf` directive is used to iterate over lists of strings or string arrays within a given `NgIterable` of strings or string

Here is a data type example: export interface TYPE_A { valueType: TYPE_A_VALUE_TYPES; value: string | string[]; } export enum TYPE_A_VALUE_TYPES { singleValue = "singleValue", multiValue = "multiValue", } In my component, I am ...

angulartypescriptngforangular-ng-if

Implementing role-based access control using Firestore security rules

I crafted these Firestore security rules to grant access solely to approved users who work with data: service cloud.firestore { match /databases/{database}/documents { match /bikes/{document} { function getRole(role) { return get(/dat ...

angulargoogle-cloud-firestoreangularfire2firebase-security

Having trouble with ngx-pagination's next page button not responding when clicked?

I am experiencing issues with pagination. The next page button does not function as expected, and clicking on the page number also does not work. Below is the code snippet and a Demo link for your reference. HTML <table mat-table [dataSou ...

angulartypescriptngx-pagination

In Typescript, you can easily group a string into sections that consist of digits like 345-67, along with text containing a

I have a string that looks like this: "[111-11] text here with digits 111, [222-22-22]; 333-33 text here" and I am trying to parse it so that I can extract the code [111-11], [222-22-22], [333-33] along with their respective text descriptions. The challeng ...

javascripttypescriptsplit

Behavior of Shadow DOM role when using the <a> element without an href attribute

Recently, I started working with the shadow DOM and encountered a strange issue: In my Ionic Angular application, there is a text styled like a link in this form (simplified): <a href="${ifDefined(this.href)}">link</a> When testing ...

typescriptshadow-dom

Is Axios the sole option for API calls when utilizing Next.js with SSG and SSR?

Can someone clarify the best practice for data fetching in Next.js? Should we avoid using axios or other methods in our functional components, and instead rely on SSG/SSR functions? I'm new to Next.js and seeking guidance. ...

javascriptreactjstypescriptnext.jsfrontend