The error in Angular states that the property 'length' cannot be found on the type 'void'

In one of my components, I have a child component named slide1.component.ts

import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-slide1',
  templateUrl: './slide1.component.html',
  styleUrls: ['./slide1.component.css'],
})
export class Slide1Component implements OnInit {
  @Input() select_option: string;
  @Output('answer') answer: EventEmitter<{
    Res: any;
    Ans: any;
  }> = new EventEmitter();
  constructor() {}

  ngOnInit() {}
  callchild() {
    var res = this.answer.emit({ Res: '', Ans: '' });
    console.log(res.length);
    console.log('child ');
  }
}

res.length

I am facing an issue where I get the error message

Property 'length' does not exist on type 'void'
, even though the method in the parent component returns an array. The function works fine in the parent component but not when called from the child component.

Working Link : https://stackblitz.com/edit/angular-ivy-gcgxgh?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fslide1%2Fslide1.component.ts

Answer №1

When using the EventEmitter.emit() method, keep in mind that it returns void, meaning there is no 'length' property associated with its return value.

For more information on how components interact, I recommend checking out the documentation on Components interaction.

Cheers!

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

Tips for sorting/merging/consolidating data in Angular

Take a look at this code snippet: rowData = [ [ '2019-12-10 08:00:00', '2019-12-10 08:00:00', '2019-12-10 08:00:00', '2019-12-10 08:00:00', '2019-12-10 08:00:00', '2018-12-10 08:00:00' ...

Display an error message in the input type file Form Control if the file format is not .doc or .docx

I need a way to display an alert if the user tries to submit a file that is not of type doc or docx. I've implemented a validator for this purpose and would like the alert message (Unacceptable file type) to be shown when the validation fails. Here i ...

Angst with the Angular Command Line Interface

After installing the Angular CLI via the command prompt, I encountered an error related to @angular-devkit/build-angular. However, everything else seems to be working fine. Does anyone have any ideas as to why this might be happening? https://i.stack.im ...

Error encountered while upgrading to Angular 5: splitHash issue

Currently in the process of transitioning from Angular 4.x to 5.x, I have encountered the following error: main.81bcdf404dc22078865d.bundle.js:1 Uncaught TypeError: i.splitHash is not a function at Object.t.parseUrl (main.81bcdf404dc22078865d.bundle.js:1) ...

The global variable in TypeScript is not specified; it is initialized within the declaration `declare global{}`

In my TypeScript code, I'm facing a challenge when trying to add a global scope variable. In JavaScript (NodeJS), this process is straightforward: // index.js globalThis.helloWorld = 'Hello World!'; require('./log.js') // log.js c ...

Using Typescript and JSX to render a component that has been passed as an argument

I am seeking to create a function that will render a React component passed as an argument. I aim to accommodate both Component and StatelessComponent types with the following approach: function renderComponent(component: React.ComponentClass<any> | ...

Selecting a GoJS Node using keys

In Angular with TypeScript, what is the best way to select a node from a diagram based on its key? Currently, I am required to left-click a newly created node in order to select it, but I would like for it to be automatically selected upon creation. I ha ...

The error message "Method Not Found: Angular4 Delete and Put API Call" was returned with a HTTP

Currently, I am working on implementing CRUD operations in Angular4. So far, I have successfully completed the GET and POST API calls. However, when attempting to execute DELETE and PUT API calls, I encounter an error message: 405 (Method Not Allowed),Resp ...

When ts-loader is used to import .json files, the declaration files are outputted into a separate

I've encountered a peculiar issue with my ts-loader. When I import a *.json file from node_modules, the declaration files are being generated in a subfolder within dist/ instead of directly in the dist/ folder as expected. Here is the structure of my ...

Loading AngularJS multiple times

I'm facing a challenge while upgrading my angularJs Application to Webpack4. This is how I've set it up: vendor.ts import "angular"; import "angular-i18n/de-de"; import "angular-route"; and main.ts import {MyAppModule} from "./my-app.app"; ...

Dimension of the viewport in an angular mobile application

As I dive into learning Angular 2 (now Angular) with hopes of creating a mobile app, I find myself wondering about the optimal size to ensure it fits properly on smartphones. Is it recommended to use a 16:9 size, or is there a standard size to follow? I ...

Modify the key within an array of objects that share a common key

I have an object structured as follows: NewObjName: Object { OLDCOLUMNNAME1: "NEWCOLUMN_NAME1", OLDCOLUMNNAME2: "NEWCOLUMN_NAME2", OLDCOLUMNNAME3: "NEWCOLUMN_NAME3"} Next, there is an array containing objects in this format: ...

The directive subscription remains inactive even when the subject triggers the next function

Plunkr: https://plnkr.co/edit/KfPfVSbZm087uIPvFEkM?p=preview I have developed a service that serves as an API for a modal component. In addition, there is a directive available that can be used to apply a class to any element when the modal is open. Howev ...

Discovering the Power of Angular 5's Rxjs forkJoin Feature

Here is the code snippet in question: this.playerSearchService.getPlayerByPlayerTag(this.searchValue).flatMap(player => this.clanSearchService.getClanByClanTag(player.clan.tag).map(clan => { return Observable.forkJoin([Observable.of(player), ...

Tips for looping through a JSON object in Angular 4 and extracting the values for Add, intA, and intB fields to populate a list

What is the best way to loop through the following JSON in a .ts file and extract the integer fields and operations like 'Add' into a list using Angular 2? let json = { "Header": null, "Body": { "Add": { "intA": "2","intB": "3" }}}} ...

What is the best approach when one property of a typescript class relies on the values of two others?

Currently, I have a TypeScript class within an Angular application that consists of three properties. The first two properties can be changed independently using [(ngModel)]. However, I am looking for a way to set the third property as the sum of the first ...

Utilizing server-side caching middleware with tRPC version 10

Currently, I am working on a Next.js project and exploring the possibility of incorporating in-memory caching for tRPC results. Each tRPC procedure should have the option to set a custom TTL for caching purposes. My initial thought is that utilizing tRPC&a ...

The application of Angular's extension may experience functionality issues due to a failed ngcc operation

https://i.stack.imgur.com/Q7eFX.png The current issue I am encountering. https://i.stack.imgur.com/Kj1r0.png However, the command ng serve is functioning smoothly without any errors. https://i.stack.imgur.com/0SluL.png I'm also facing this partic ...

InvalidTypeException: The properties accessed are undefined

Working with Angular 12 and encountering an error when trying to invoke a method within another method. Here is a simplified representation of my situation (in TypeScript, specifically for Angular: export class SomeClass { testvariable on ...

`Running ng serve will result in the creation of a 'dist' folder within each app sub

Since beginning my project, I have encountered an issue that is both normal and frustrating. The dist folder is being created with incomplete information related to the components inside it. dashboard dist (unwanted) components panel dist (unwanted) c ...