Struggling with implementing an EventEmitter in Angular2?

I am facing an issue with handling an EventEmitter in my child component, which is a list of devices. The parent component displays details of the selected device and I want to be able to change the selected device when needed. However, I keep getting an error message that says:

Unexpected directive value 'undefined' on the View of component 'ListOfDevicesComponent'

The complete console log shows:

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'ListOfDevicesComponent'
angular2.dev.js:23083 EXCEPTION: Unexpected directive value 'undefined' on the View of component 'ListOfDevicesComponent'BrowserDomAdapter.logError @ angular2.dev.js:23083BrowserDomAdapter.logGroup @ angular2.dev.js:23094ExceptionHandler.call @ angular2.dev.js:1185(anonymous function) @ angular2.dev.js:12591NgZone._notifyOnError @ angular2.dev.js:13515collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13419Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13438zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123microtask @ angular2.dev.js:13470Zone.run @ angular2-polyfills.js:1243(anonymous function) @ angular2.dev.js:13438zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
angular2.dev.js:23083 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23083ExceptionHandler.call @ angular2.dev.js:1187(anonymous function) @ angular2.dev.js:12591NgZone._notifyOnError @ angular2.dev.js:13515collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13419Zone.run @ angular2-polyfills.js:1247(anonymous function) @ angular2.dev.js:13438zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$$internal$$tryCatch @ angular2-polyfills.js:468lib$es6$promise$$internal$$invokeCallback @ angular2-polyfills.js:480lib$es6$promise$$internal$$publish @ angular2-polyfills.js:451(anonymous function) @ angular2-polyfills.js:123microtask @ angular2.dev.js:13470Zone.run @ angular2-polyfills.js:1243(anonymous function) @ angular2.dev.js:13438zoneBoundFn @ angular2-polyfills.js:1220lib$es6$promise$asap$$flush @ angular2-polyfills.js:262
angular2.dev.js:23083 Error: Unexpected directive value 'undefined' on the View of component 'ListOfDevicesComponent'
    at new BaseException (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:7351:21)
    at RuntimeMetadataResolver.getViewDirectivesMetadata (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:22367:17)
    at TemplateCompiler._compileNestedComponentRuntime (http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24329:63)
    at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24314:26
    at Array.forEach (native)
    at http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24313:37

To troubleshoot, I commented out some code lines to isolate the problem. It appears that the error originates from this line in my child component:

private selectDevice: EventEmitter<Device> = new EventEmitter();

Removing this line resolves the error. Below are relevant parts of my code related to this issue for reference.

This snippet is from my ListOfDevicesComponent (child component):

@Component({
    // Other properties...
    inputs: ['selectedDevice'],
    outputs: ['selectDevice'],
    directives: [
    DeviceOverviewComponent,
    ROUTER_DIRECTIVES]
})

export class ListOfDevicesComponent {
    private devices = this._devicesServices.getDevices();
    private selectedDevice: Device;
    private selectDevice: EventEmitter<Device> = new EventEmitter();

    constructor(private _devicesServices: DevicesServices) {}

    onSelect(device: Device) {
        this.selectDevice.next(device);
    }
}

The corresponding template section:

<tbody>
    <tr *ngFor="#device of devices" [class.active]="device === selectedDevice" (click)="onSelect(device)">
        <device-overview [currentDevice]="device" ></device-overview>
    </tr>
</tbody>

Snippet from my DeviceDetailsComponent (parent component):

@Component({
    // Other properties...
    directives: [
        ListOfDevicesComponent,
        ROUTER_DIRECTIVES]
})

export class DeviceDetailsComponent {
    private devices = this._devicesServices.getDevices();
    private selectedDevice: Device;

    constructor(private _devicesServices: DevicesServices) {}

    handleSelectDevice(device) {
        this.selectedDevice = device;
    }

}

It integrates the child component like this:

<list-of-devices [selectedDevice]="device" (selectDevice)="handleSelectDevice($event)"></list-of-devices>

Any assistance or insights would be greatly appreciated!

typescriptevent-handlingangularmaster-detail

Answer №1

Seems like the device-overview component is absent from the directives: parameter

@Component({
    // Other properties...
    inputs: ['selectedDevice'],
    outputs: ['selectDevice'],
    directives: [DeviceOverview], // <==
})

export class ListOfDevicesComponent {

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

Guide to importing simulated data from a JSON file in Angular 2 Karma Jasmine tests

Currently, I am working on creating karma jasmine test case for angular 2. We have encountered a requirement to mock data in a separate JSON file due to the large amount of data (to maintain code cleanliness). After extensive research, we were unable to f ...

jsonangularjasminekarma-jasmine

Failure to trigger the before-prepareJSApp hook in nativescript-dev-webpack

I am currently facing some challenges while trying to bundle my Nativescript app using webpack. The first issue arises when I run the following command: tns build android --bundle After running this command, it seems like webpack is not doing anything. ...

angularwebpacknativescript

Tips on updating primeng Panel Menu appearance with scss

I'm looking to customize the color of my panel menu to black. Below is the HTML code I am using. <p-panelMenu styleClass="font-bold text-xs m-0 w-11" [model]="items" [multiple]='false'></p-panelMenu> ...

htmlcssangularsassprimeng

Issue with App.Module imports not functioning properly on Ionic pages

I am currently working on a directive that I want to implement in my pages. However, when I import something into app.module, it seems as though the pages are not considered children of app.module. On the other hand, if I directly import the directive into ...

angularionic-framework

Unable to open Material Dialog after selecting marker in ngx-leaflet

I am currently utilizing the ngx-leaflet and ngx-leaflet-draw libraries to display a leaflet map. I have successfully displayed a marker on the map using the toolbar-marker-icon feature. My goal now is to show a Material Dialog Component when the marker is ...

angularleaflettypeerrorngx-leafletmaterial-dialog

Setting up jsonServer in gulp with typescript: A guide

Previously, I had set up a json server and used the following code to start it: I found guidance in this GitHub repository. Starting angular2 project with gulp gulp-live-server.js var gulpCore = require('gulp'); var gulpParam = require('g ...

angularjstypescriptangulargulp

Implement TypeScript to include type annotations on functions' parameters using destructuring and the rest syntax

Issues with Typing in Typescript Trying to learn typing in Typescript has presented some difficulties for me: I am struggling to convert this code into a strongly-typed format using Typescript. const omit = (prop: P, { [prop]: _, ...rest}) => rest; ...

typescripttypescript-typings

What is the best method for displaying an empty message within a table cell (td) when the ng.for loop has fewer items than the table headers

I have created a code to display data in a table format. However, I am facing an issue where the table headers (#4 and #5) do not show any data (td). How can I implement an empty message for these table headers when there is no corresponding data available ...

javascripthtmlangulartypescript

Bringing in Angular Material on Stackblitz

After importing material(7.2.1) into my stackblitz link, I am still unable to see the exact UI of material. I have tried to figure it out, but no luck. You can view the stackblitz I created here. ...

angularangular-material

Using Angular's setTimeout() function with an external lambda that includes a parameter

My goal is to tackle two issues at once: 1) using setTimeout( #action#, timeMillis) with #action# as a lambda 2) supplying the lambda with a parameter. The common method of setTimeout( ()=>{ #callback# }, timeMillis) works flawlessly when extracting () ...

angulartypescript

Unexpected halt in execution - VS Code Logpoint intervenes abruptly

Recently, I delved into the world of JavaScript/TypeScript development in VS Code. Intrigued by Eclipse Theia, I decided to explore it further by setting up a backend service. To track its execution, I added a logpoint to my backend service to see when it ...

javascripttypescriptvisual-studio-codebreakpoints

Using a forward slash '/' to navigate to a specific URL

When routing to a page, I encounter an issue with sending IDs that may contain slashes '/'. This poses a problem because the route will change as a result. For example: somepage/my-id/2f On the destination page, I need to be able to interpret t ...

angular

How can you incorporate TypeScript's dictionary type within a Mongoose schema?

When using TypeScript, the dictionary type format is: { [key: string]: string; } However, when I try to define a custom schema in mongoose, it doesn't work as expected. const users = new Schema({ [key: string]: String, }); I also attempted t ...

javascriptnode.jsmongodbtypescriptmongoose

Reactive forms in Angular do not refresh or update automatically when a new error is added

Upon initializing my FormGroup in the ngOnInit() method, I invoke a validator function to ensure that the password and confirmPassword fields match. This is how it looks in TypeScript: regForm: FormGroup; constructor() { } ngOnInit() { this.regFo ...

angularangular-reactive-formsangular-custom-validators

How to retrieve a stored value using Ionic 3 native storage

Hey there, I recently attempted to implement code from the Native Storage plugin documentation found at this link: Native Storage import { NativeStorage } from '@ionic-native/native-storage'; constructor(private nativeStorage: NativeStorag ...

angulartypescriptcordova-pluginsionic3cordova-nativestorage

TypeORM does not have the capability to effectively remove a row when there is a ManyToOne or

I'm currently grappling with a problem that has me stumped. I've spent countless hours trying to find a solution, but to no avail. I'm using MS-SQL on Azure. The structure of my entities is as follows: Customer and Visits: OneToMany (Prima ...

sqlsql-servertypescriptormtypeorm

Choose a dynamic ngFor item attribute to be placed as a property in the @Input decorator

In my Angular 6 code, I am attempting to create a select component. <ng-select [(ngModel)]="selecteditemid"> <ng-option *ngFor="let item of items" [value]="item.id"> {{item.inputfield}} <---- ERROR </ng-option> </ng-se ...

angularangular6angular-components

How to seamlessly incorporate Polymer Web Components into a Typescript-based React application?

Struggling to implement a Polymer Web Components tooltip feature into a React App coded in TypeScript. Encountering an error during compilation: Error: Property 'paper-tooltip' does not exist on type 'JSX.IntrinsicElements' To resolve ...

reactjstypescriptpolymerweb-componentgoogle-web-component

How can I properly create an instance of a template dynamically using @ViewChild to query a template reference variable?

Instead of passing the template reference variable mytemplate to *ngTemplateOutlet, I wanted to explore a different approach using the @ViewChild decorator. However, during this process, I encountered some errors that are currently puzzling me. Simplifie ...

angular

Creating a TypeScript constructor for the parent class that accesses the properties of the child class

abstract class Parent { public foo: string; constructor(v: Partial<Parent>) { Object.assign(this, v); } } class ChildA extends Parent { bar: string; } class ChildB extends Parent { baz: string } In this scenario, const a = new Child ...

typescripttypescript-typingstypescript-generics