Fix selected event not working on 3.0.3

[MrNocTV]

Move selected event subscription code into ngAfterViewInit. this.completer is stilll undefined in ngOnInit, that's the reason why we couldn't subscribe to selected event.

Fix for #442

[greywire]

Is there a way to get this into my project before its actually released? I tried to point NPM at this repo/branch with the fix in it but I get errors on launching my app, it cant find ng2-completer when I use this directly from github?

[MrNocTV]

Is there a way to get this into my project before its actually released? I tried to point NPM at this repo/branch with the fix in it but I get errors on launching my app, it cant find ng2-completer when I use this directly from github?

Hi @greywire , have you tried this?

npm install MrNocTV/ng2-completer#fix/fix-selected-event-not-working-on-3.0.3 --save

This will install ng2-completer with the code in this PR. For example, after install you might see something like this:

  "dependencies": {
    "express": "^4.17.1",
    "ng2-completer": "github:MrNocTV/ng2-completer#fix/fix-selected-event-not-working-on-3.0.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "1.1.5"
  },

[greywire]

Yeah thats exactly what I tried, and got this:

ERROR in app/app.module.ts:26:36 - error TS2307: Cannot find module 'ng2-completer'.

(followed by a bunch more errors, but thats first one).

Any ideas?

[MrNocTV]

@greywire

Sorry, I have no idea why it doesn't work on your side. This might sound dumb but have you tried install it on a new project with the latest version of node and npm?

[sauvageb]

@MrNocTV my package.json is :

{
  "name": "app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@angular/animations": "~9.0.1",
    "@angular/common": "~9.0.1",
    "@angular/compiler": "~9.0.1",
    "@angular/core": "~9.0.1",
    "@angular/forms": "~9.0.1",
    "@angular/localize": "^9.0.2",
    "@angular/platform-browser": "~9.0.1",
    "@angular/platform-browser-dynamic": "~9.0.1",
    "@angular/router": "~9.0.1",
    "@ng-bootstrap/ng-bootstrap": "^6.0.0",
    "@types/jquery": "^3.3.33",
    "bootstrap": "^4.4.1",
    "font-awesome": "^4.7.0",
    "ng2-completer": "github:MrNocTV/ng2-completer#fix/fix-selected-event-not-working-on-3.0.3",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.901.0",
    "@angular/cli": "^9.1.0",
    "@angular/compiler-cli": "~9.0.1",
    "@angular/language-service": "~9.0.1",
    "@types/google-maps": "^3.2.2",
    "@types/googlemaps": "^3.39.3",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }
}

My app.module.ts :

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {AgmCoreModule} from '@agm/core';
import {HomeComponent} from './home/home.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {Ng2CompleterModule} from 'ng2-completer';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    NgbModule,
    Ng2CompleterModule,
    HttpClientModule,
    AgmCoreModule.forRoot({
      apiKey: '###',
      libraries: ['places']
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

My error is the same :

ERROR in src/app/home/home.component.ts:18:61 - error TS2307: Cannot find module 'ng2-completer'.

18 import {CompleterCmp, CompleterData, CompleterService} from 'ng2-completer';
                                                               ~~~~~~~~~~~~~~~
src/app/app.module.ts:19:34 - error TS2307: Cannot find module 'ng2-completer'.

19 import {Ng2CompleterModule} from 'ng2-completer';
                                    ~~~~~~~~~~~~~~~

Can you help me please ?