Typescript - Loading Data into a Dropdown Menu

I'm facing an issue with my app where I have a component called week-selector. It's a simple dropdown with team names, but I'm encountering an error related to the @Output() function. The error message says:

Generic Type 'EventEmitter requires 1 type argument(s)

So, my question is: How can I successfully populate the dropdown with team names?

Below is the code from my week-selector component:

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

export class DropdownValue {
value:string;
label:string;

constructor(value:string,label:string) {
this.value = value;
this.label = label;
 }
}

@Component({
selector: 'dropdown',
template:
`
<form class = "ui small form segment">
<div id="WeekSubmission">
<h1> Please enter the week you are in: </h1>
<ul>
<li *ngFor="#value of values" (click)="selectItem(value.value)">    {{value.label}}</li>
</ul>
</div>
</form>
  `
})

export class WeekSelectorComponent implements OnInit {
values:DropdownValue[];

@Output()
select:EventEmitter;

constructor() {
this.values = [ new DropdownValue('Team','Liverpool')];
this.select = new EventEmitter();
}

selectItem(value){
 this.select.emit(value)
}

ngOnInit() {
 }

}

Answer №1

To properly declare the "select" variable, you should do the following:

@Output()select: EventEmitter<string>;

Instead of :

@Output()select: EventEmitter;

It is important to specify the type for the event emitter so that it indicates the type of event value being emitted. In this case, the type is "string". Therefore, it should be declared as:

@Output()select: EventEmitter<string>;

I hope this explanation is clear and helpful!

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

execute the angular service within the "then(function(){})" block

I have a specific requirement where I need to capture a screenshot of a view when the user clicks on a button, send it back to the backend to save as a PDF in the database, and then allow the user to download the same image. Currently, I am utilizing the D ...

Having trouble installing Angular 4 with npm?

After installing Angular, I encountered an error when trying to use the command line "ng -v". Please refer to the attached jpeg file. My node version is 6.10.3. Does anyone have a solution? https://i.sstatic.net/ZQ69k.png ...

Challenges with date formatting arise for Spanish speakers when the date returns as NaN or an Invalid

I have been working on an Angular app Objective: My aim is to allow users to input dates in Spanish format (DD/MM/YYYY) and display them as such, while converting them back to English format when saving the data to the Database. Issue: One problem I enco ...

Dynamic rows in an Angular 2 Material data table

I'm currently working on dynamically adding rows to an Angular 2 Data Table ( https://material.angular.io/components/table/overview) by utilizing a service called "ListService". This service provides me with the columns ("meta.attributes") to be displ ...

What is the best method for sharing templates and logic in VUE?

Two separate components with shared logic and template, making it appear as though one is extending the other. Think of Drop and Pick components in this manner: // pick.js import Vue from 'vue' import Component from 'vue-class-component& ...

Utilizing a single Observable across multiple Pages and Components through a Service

I am attempting to subscribe to the same Observable multiple times, but it is not working as expected. I have a Provider that retrieves the Observable from an AngularFirestore object. Here is my provider: @Injectable() export class MyProvider { private ...

When utilizing Angular CLI's commands 'generate' and 'compile', it may lead to getting stuck on the eternal loop of "Loading..."

After creating a new project using ng new test and running ng build --prod, I pushed the dist folder to a Github repo and enabled pages. However, the resulting page appears to be stuck on "Loading....". I also tried using express to sendFile the index.html ...

Error message: In the combination of NextJs and Redux, an issue has occurred where the program is unable to access properties of null, specifically in

I am just getting started with Next and redux, but I am facing an issue. https://i.sstatic.net/CZTO2.png The error shown above occurs when trying to select a redux value from the store. I have attempted using raw useSelector from redux toolkit, but it s ...

Leverage the component's recursive capabilities to build a tree structure from within

Is it feasible to use a component within itself? If so, where can I find more information on this? I am facing the following scenario: I have a list of main items, each main item has a subitem (which looks like the main item), and each subitem can have i ...

What is the best way to list the choices associated with a specific category?

The Node.js package I'm currently working with requires an argument of a specific type, which I can see is defined through a TypeScript declaration as follows: export declare type ArgType = 'A' | 'B' | 'C'; I am interes ...

Manipulate md-select options with Angular using setValue

My goal is to update a select option, but I'm having trouble getting it to work properly. When I use this.eventForm.controls.venue.setValue(event.venue.name);, the value of venue changes to match event.venue.name. However, the select option itself doe ...

How can one access a dynamically generated element in Angular without using querySelector?

Currently in the process of developing my custom toastr service, as shown in the GIF below https://i.sstatic.net/Zpbxs.gif My Objective: https://stackblitz.com/edit/angular-ivy-tgm4st?file=src/app/app.component.ts But without using queryselector. It&apos ...

Creating dynamic DOM elements in Angular templates by utilizing variable values as element types

There's a component I'm working with that I want to render either as a div or span dynamically. To achieve this, I've created an input variable called elementType. Now, the challenge is how to properly render it in the template. Here's ...

When there are multiple tabs open in the browser, I notice a difference in the time displayed. This occurs in an Angular 2 environment

https://i.sstatic.net/l4YQ1.pngAfter a successful login, I am fetching server time from the back-end (in Java) and adding 1 second at intervals. Observable.interval(1000).map(() => { return this.time.add(1, 'seconds'); }). ...

Icon for closing Mui Snackbar

I am facing an issue with my notification component that uses the mui snackbar to display alerts. I want to display multiple notifications stacked vertically, but when I try to close one notification using the "Close" icon, it ends up closing both that o ...

The child components of the parent route in Angular 2 are organized as nested route components

Do nested route components act as children of the parent route component? Can they communicate by using an Output from a child route component to the parent route component? If not, what is the suggested approach in this scenario? Since components in rou ...

Library for Typescript on npm

My project involves a collection of base classes in TypeScript. Within a web application built with React and written in TypeScript, I am looking to integrate a library called 'Plain Old TypeScript objects', which defines all the data types. Let& ...

Implementing a Loading Spinner with Angular4's HttpClient Interceptor

Within this code snippet, you will find the interceptor I created to manage the spinner directly through the interceptor itself. @Injectable() export class ApiInterceptor implements HttpInterceptor { constructor(private _globalSpinnerService: GlobalSp ...

Guide on integrating jQuery list filtering in Ionic 2

I stumbled upon a jQuery function that filters data in HTML, found it online. Now, I want to incorporate a similar feature into my Ionic app. However, I am unsure about the modifications required in list-search-min.js. Here is a snippet of my index.html: ...

Should the token be stored in the browser's sessionStorage?

What is the preferred client-side storage option provided by web browsers? ...