Exception when using dropdown with @angular/router

UI Components for Angular
Post Reply
Posts: 5
Joined: 12 Feb 2013, 10:55

31 May 2016, 21:51

Component code in a simplified ex. looks like this:

Code: Select all

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { Dropdown } from 'primeng/primeng';

  directives: [Dropdown],
  template: `
    <h2>DropDown Example</h2>
    <p-dropdown [options]="lang" [(ngModel)]="selLang"></p-dropdown>
    <p>Selected Language: {{selLang||'none'}}</p>
export class DropDownComponent {
  private lang: any[];
  private selLang: string[];

  constructor(private router: Router) {
    this.lang = [];
    this.lang.push({label: 'Java', value: 'Java'});
    this.lang.push({label: 'C++', value: 'C++'});
    this.lang.push({label: 'Perl', value: 'Perl'});
    this.selLang = [];
But after navigating to the page and when doing [F5] (in Chrome), the following exception appears:

Code: Select all

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./DropDownComponent class DropDownComponent - inline template:2:4
ORIGINAL EXCEPTION: TypeError: this.documentClickListener is not a function
TypeError: this.documentClickListener is not a function
    at Dropdown.ngOnDestroy (http://localhost:8000/node_modules/primeng/components/dropdown/dropdown.js:286:14)
    at DebugAppView._View_DropDownComponent0.destroyInternal (DropDownComponent.template.js:166:22)
    at DebugAppView.AppView.destroyLocal (http://localhost:8000/node_modules/@angular/core/src/linker/view.js:144:14)
    at DebugAppView.destroyLocal (http://localhost:8000/node_modules/@angular/core/src/linker/view.js:279:43)
    at DebugAppView.AppView._destroyRecurse (http://localhost:8000/node_modules/@angular/core/src/linker/view.js:133:14)
    at DebugAppView.AppView._destroyRecurse (http://localhost:8000/node_modules/@angular/core/src/linker/view.js:131:25)
    at DebugAppView.AppView.destroy (http://localhost:8000/node_modules/@angular/core/src/linker/view.js:119:14)
    at ComponentRef_.destroy (http://localhost:8000/node_modules/@angular/core/src/linker/component_factory.js:113:82)
    at RouterOutlet.unload (http://localhost:8000/node_modules/@angular/router/src/directives/router_outlet.js:12:22)
    at _LoadSegments.unloadOutlet (http://localhost:8000/node_modules/@angular/router/src/router.js:267:24)
The example works oke until refresh.
Other PrimeNG components do not seem to be a problem (until so far).
Does anyone have a clue what appears to be the problem?

Posts: 18467
Joined: 05 Jan 2009, 00:21
Location: Cybertron

31 May 2016, 23:22

Can you replicate at live showcase?

Posts: 5
Joined: 12 Feb 2013, 10:55

01 Jun 2016, 12:31

I'm afraid not, but you can find the sample project at https://gitlab.com/mytopaxx/sample_primeng if that helps.

Posts: 5
Joined: 12 Feb 2013, 10:55

11 Jun 2016, 11:14

Changing dropdown.js a bit, helps:

Code: Select all

    Dropdown.prototype.ngOnDestroy = function () {
        if (typeof(this.documentClickListener) == "function") {
        this.initialized = false;

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests