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

Performing calculations on two properties of an observable object in Angular 8 and then storing the result in a new property

Looking for guidance on how to display the sum of two properties from an observable data. Take a look at the code below and let me know your thoughts: Typescript class export class Amount { Amount1: number; Amount2: number; Total:number; } In typescript ...

angulartypescriptangular-materialobservableangular-services

Assign object properties to a constant variable while validating the values

When receiving the features object, I am assigning its values to constants based on their properties. const { featureCode, featureSubType, contentId, price, family: { relationCountsConfig: { motherCount, fatherCount, childrenCount }, max ...

javascriptreactjstypescript

Angular 2 Universal Starter Kit - issue with importing 'ProvideRouter'

I am in the process of setting up my project for Angular Universal using the quickstart However, I have encountered several errors while trying to install typings: Benjamins-MBP:vepo Ben$ sudo typings install node express body-parser serve-static express ...

node.jsangularnode-modulescommonjsangular2-universal

Typescript support on Emacs

"Is there a way to enable Typescript syntax highlighting in Emacs?" I have been struggling with this for quite some time. Using Emacs 24 on an Ubuntu Virtualbox VM, I can't seem to get package-refresh-contents to work as it just hangs on "Contacting ...

typescriptemacs

Defining RefObject effectively in TypeScript

Greetings everyone, I am a newcomer to TypeScript and currently attempting to create a type for a RefObject that is of type HTMLAudioElement. However, I have encountered an error message. The error states: Type 'MutableRefObject<HTMLAudioElement> ...

reactjstypescript

Is there a way to instruct Babel to generate polyfills such as `__createClass` only once for multiple files?

In my project, I have multiple ES6 files, each containing at least one class. For every file, the __createClass, __interopRequireDefault, and __classCallback polyfilling functions are generated. I plan to concatenate them using browserify, but it seems re ...

node.jstypescriptbabeljs

I'm curious, which ref tag should I utilize for draft.js?

I'm currently working on a form using Draft.js with Next.js and TS, but I've encountered some errors in my code. Here is what I have so far: import {Editor, EditorState} from 'draft-js'; const [editorState, setEditorState] = useState( ...

reactjstypescriptnext.jsdraftjsuse-ref

How can an additional value be sent to the form validation method?

I have created a form group like this: import { checkPasswordStrength } from './validators'; @Component({ .... export class PasswordComponent { ... this.userFormPassword = this.fb.group({ 'password': ['', [ ...

javascriptangulartypescript

Error: invalid syntax found in the expression "path". This issue is specific to Angular 4

I encountered an issue while trying to utilize routerLink with a value from a property in my component. ERROR: Syntax error, unrecognized expression: /configuration/reservations at Function.Sizzle.error (scripts.bundle.js:1581) at Sizz ...

node.jsangularangular4-router

Utilizing a React hook to render and map elements in a function

Can the hook return function be assigned to a render map in React? In this example, we have the socialAuthMethodsMap map with the onClick parameter. I tried to assign the signInWithApple function from the useFirebaseAuth hook, but it violates React's ...

javascriptreactjstypescriptfirebasereact-hooks

In TypeScript, there is a mismatch between the function return type

I am new to TypeScript and trying to follow its recommendations, but I am having trouble understanding this particular issue. https://i.stack.imgur.com/fYQmQ.png After reading the definition of type EffectCallback, which is a function returning void, I t ...

reactjstypescript

What is the method for determining the type of a TypeScript class member that is associated with a commonly used symbol such as Symbol.toStringTag?

Does anyone know the correct TS syntax for extracting the type of a class method indexed with a well-known Symbol? Here are two incorrect methods: type T = String[Symbol.toStringTag]; // 'Symbol' only refers to a type, but is being used as a name ...

typescripttypescript-typings

Angular does not receive events from Socket.io

Recently I started coding with AngularJS and decided to build a real-time app using Socket.io: The service I'm using shows that the connection is fine on the console. Here's a picture of the Console.log output However, when I attempt to emit c ...

node.jsangularsocketssocket.io

The type of Object.values() is not determined by a union or Records

When utilizing TypeScript, the Object.values() function encounters issues in deducing the accurate type from a union of Records: type A = Record<string, number>; type B = Record<string, boolean>; function func(value: A | B) { const propert ...

typescript

Allowing cross-origin resource sharing (CORS) in .NET Core Web API and Angular 6

Currently, I am facing an issue with my HTTP POST request from Angular 6. The request is successfully hitting the .net core Web API endpoint, but unfortunately, I am not receiving the expected response back in Angular 6. To make matters worse, when checkin ...

c#angulartypescriptasp.net-core

Is it advisable to flag non-(null|undefined)able type arguments as a type error?

Can the function throwIfMissing be modified to only flag test1 as a compiler error? function throwIfMissing<T>(x: T): T { if (x === null || x === undefined) { throw new Error('Throwing because a variable was null or undefined') ...

typescript

The challenge of handling Set type in TypeScript errors

I'm currently facing two errors while trying to convert a function to TypeScript. The issue lies with the parameters, which are of type Set import type {Set} from 'typescript' function union<T>(setA: Set<T>, setB: Set<T>) ...

javascripttypescript

Unable to fetch data from URL in Angular using the HttpClientModule

I have a goal in my application to retrieve data from the following URL and showcase it within the app: https://jsonplaceholder.typicode.com/posts/1 The issue I'm encountering is that the data is not being displayed in my app. The console is showing ...

angulartypescripthttpmodule

Using electron cookies in Angular involves integrating Electron's native cookie functionality into an

I am currently dealing with electron and looking to implement cookies conditionally in my project. If the application is built using electron, I want to utilize Electron Cookies; otherwise, I plan to use Angular Cookies. However, I'm encountering diff ...

javascriptnode.jsangularcookieselectron

Can you explain the rule known as the "next-line" in TypeScript?

No code examples are available for the specific scenario described below: "next-line": [ true, "check-catch", "check-finally", "check-else", "check-open-brace", "check-whitespace" ], ...

typescriptruletslint