Converting a string[] to an EventEmitter string[] in Angular 4 with TypeScript: Step-by-step guide

Programming Language: Typescript – written as .ts files

Development Framework: Angular 4

I'm currently working on an application that is supposed to add chips (similar to tags in Angular 1) whenever a user types something into the input box and hits the "Add Chip" button.

My problem revolves around two variables I have defined, specifically addSelectedCode and addCode:

@Input() addSelectedCode: string[];

@Output() addCode: EventEmitter<string[]> = new EventEmitter;

Every time I attempt to assign one variable to the other, I encounter an error.

this.addCode = this.addSelectedCode;

The error message looks like this:

Type 'string[]' is not assignable to EventEmitter 'string[]'. Property __isAsync is missing in string[].

I am unsure of how to troubleshoot and fix this issue. Does anyone have any insights or solutions they can share?

SOLUTION FOUND: Update your code with this line, this.addCode.emit(this.selectedCode);

angulartypescript

Answer №1

If you want to trigger an event using the updated array, then follow these steps:

@Output() codeAdded = new EventEmitter<string[]>();
...

onCodeAdd(newCode) {
 this.selectedCodes.push(newCode);
 this.codeAdded.emit(this.selectedCodes);
}

However, it is possible that you don't actually need to do this as selectedCodes will automatically update for the caller (due to two-way binding).

Answer №2

When setting up the template in your parent component that calls the child component with the @Input and @Output statements, make sure to include the following line: 

<child-component [addselectedCode]="variableInParentWithArray" (addCode)="methodToReceiveArray($event)></child-component>

In the Parent component, create a method:

methodToReceiveArray(event: string[]): void {...}

This method is used to receive the array from the child component.

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

Utilizing statuses in Typescript React for conditional rendering instead of manually checking each individual variable

It's common for developers, myself included, to perform conditional rendering by checking variable values like this: import React, { useState, useMemo } from 'react' const Page = () => { const [data, setData] = useState<any[]>() ...

reactjstypescript

Determine the data type of an individual attribute within a collection of classes

I am working with a series of classes that have a body property defined within them. Here is an example: class Foo { body: {foo: string} constructor(body: Record<string, string>) { this.body = { foo: body.foo } } } class Bar { body: {ba ...

typescript

What is the reason behind installing both Typescript and Javascript in Next.js?

After executing the command npx create-next-app --typescript --example with-tailwindcss my_project, my project ends up having this appearance: https://i.stack.imgur.com/yXEFK.png Is there a way to set up Next.js with Typescript and Tailwind CSS without i ...

javascriptreactjstypescriptnext.js

GlobalsService is encountering an issue resolving all parameters: (?)

I am currently working on implementing a service to store globally used information. Initially, the stored data will only include details of the current user. import {Injectable} from '@angular/core'; import {UserService} from "../user/user.serv ...

node.jsangulartypescriptnpm

What is the method to modify the starting point of the animation for the material component "mat-progress-bar" so it initiates from 0 instead of 100

I recently integrated a material progress bar into my Angular project. Here is the code snippet: <mat-progress-bar mode="determinate" value="40"></mat-progress-bar> However, I encountered an issue where upon page refresh, ...

angularangular-materialmaterial-uiprogress-bar

Customizable column layout in react-grid-layout

I am looking to implement a drag and drop feature in which users can place items into a grid without fixed columns. The goal is that if an item is dragged from outside the grid boundaries and dropped to the right (an empty area), the grid will automaticall ...

reactjstypescriptreact-grid-layout

Utilizing an Express server instead of Lite server in combination with Angular 2 RC

Looking to develop a single page application using the latest Angular 2 RC and an Express server, but unsure how to connect them without utilizing Bower, Gulp, and Webpack. I have explored some starter packs but haven't found one that meets my expecta ...

node.jsexpressroutesangularserver

Setting up an auto-complete dropdown with PrimeNG and Angular

Struggling with the auto-complete feature, where the dropdown loads initially but fails to filter values as I type. Here's a snippet from service.ts: getUserLocations(UserID: string, allList:string ) { return this._http.get(environment.BASE ...

angularprimengprimeng-datatableprimeng-dropdowns

Converting custom JSON data into Highcharts Angular Series data: A simple guide

I am struggling to convert a JSON Data object into Highcharts Series data. Despite my limited knowledge in JS, I have attempted multiple times without success: Json Object: {"Matrix":[{"mdate":2002-02-09,"mvalue":33.0,"m ...

jsontypescriptobjecthighcharts

Issue encountered while installing npm dependencies: JSON input terminated unexpectedly in the vicinity of '...ories":{},"dist":{"in'

Encountering an issue with running npm install. The debug.log is showing the following logs: 2644 silly saveTree +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55223037333a3b21393a3431302715647b637b">[email protect ...

angularnpm

Developing middleware for managing event handlers

Scenario: I am tasked with managing multiple events that necessitate an "available client". Therefore, in each event handler, my first step is to attempt to acquire an available client. If no client is available, I will send a "Service unavailable" messag ...

javascriptnode.jstypescript

Error: Unable to load the parser '@typescript-eslint/parser' as specified in the configuration file '.eslintrc.json' for eslint-config-next/core-web-vitals

When starting a new Next.js application with the specific configuration below: ✔ What name do you want to give your project? … app ✔ Do you want to use TypeScript? … No / [Yes] ✔ Do you want to use ESLint? … No / [Yes] ✔ Do you want to use T ...

typescriptnext.jseslintprettiereslintrc

Get the most recent edition (10th version) of ngx-bootstrap to use with Angular 15

According to the official website, the 10th version of ngx-bootstrap is compatible with Angular 15: Angular (14.x.x - 15.x.x) ngx-bootstrap (10.0.0) However, when I try to install it (npm install ngx-bootstrap@latest), I encounter an error: The error me ...

angularnpmngx-bootstrap

Retrieve server information without utilizing data.map since array.map is not a supported function in next.js version 13

Currently, I am developing a list page using next.js 13 to display a collection of projects. I made an attempt to enable server-side rendering for this feature. The implementation is located in app/team/page.tsx import { useRouter } from 'next/navig ...

typescriptnext.jsfetch-api

Determine the presence or absence of data in an Angular Observable

Here is an example of how I am making an API call: public getAllLocations(): Observable<any> { location = https://v/locations.pipe(timeout(180000)); return location; } In my appl ...

angulartypescriptobservable

Guide to implementing real-time filtering for a table through user input in a text box

https://i.stack.imgur.com/6DTAb.jpgI have a task to complete for an assignment. The assignment requires implementing client-side filtering of data as text is entered in a text box. I need guidance on how to implement it. Below is the problem statement for ...

angular

Troubleshooting Next.js 14 JWT Session Error in Conjunction with Next Auth - addressing a type

Recently, I delved into working with Next.js 14 and Next Auth 5 beta. However, every time I attempt to log in, I encounter the following error: [auth][error][JWTSessionError] [auth][cause]: TypeError: Cannot read properties of undefined (reading 'user ...

typescriptnext.jsjwtnext-authnext.js14

Typescript does not produce unused members

Having an issue with the JS code that TypeScript compiler is generating. Here's an example class: // Class export class UserDTO { Id: number; FirstName: string; LastName: string; DateOfBirth: Date; getFullName(): string { ...

javascripttypescriptknockout-mapping-plugin

What is the method for accessing HttpEvent progress during a file upload in Angular 5?

Despite going through the angular.io documentation and other responses on Stack Overflow, I am still struggling to understand how to track file upload progress for my POST request from Angular 5 to NodeJS and then display it to the user. Here is what my c ...

angular

Guide on how to create a custom response using class-validator in NestJS

Is it feasible to customize the error response generated by class-validator in NestJs? The default error message structure in NestJS looks like this: { "statusCode": 400, "error": "Bad Request", "message": [ { "target": {} ...

javascripttypescriptnestjsclass-validator