Angular 8 support?

[Figments]

Hello.

I'm currently getting an error trying to implement Toppy in an Angular 8 SPA, specifically in regards to the @ViewChild decorator.

On the following piece of code:

@ViewChild('login', { read: typeof ElementRef, static: true }) login: ElementRef;

The error outputs as:

ERROR in src/app/app.component.ts(12,31): Error during template compile of 'AppComponent'
  Expression form not supported.

I believe it might have to do with a lack of support for Angular 8? Though I'm not entirely sure. Any update on this would be appreciated.

[buseodaci]

Hi,
I prepared an example using Angular 8. I had to made changes using this package. I hope it helps but u can see here.
https://angular-bdhgvc.stackblitz.io
For code :
https://stackblitz.com/edit/angular-bdhgvc

[Figments]

I can't seem to open either link. The first gets stuck infinitely attempting to start the dev server, while the second nets a 404.

[Figments]

It appears like it's having the same issue. Could you maybe post the code in a Gist or Pastebin? Don't know why stackblitz is giving me issues.

[buseodaci]

Here you go : https://github.com/buseodaci/toppy-angular

[Figments]

Awesome. That link works. I'll report back if I can get it working.

Thanks! :D

[buseodaci]

I hope it helps.

[Figments]

Well, the good news is the Expression form not supported error is now gone. However, activating the button results in an undefined is not an object error.

The code in question:

export class AppComponent {
  @ViewChild("login", { read: ElementRef, static: true })
  login: ElementRef;
  overlay: ToppyControl;
  overlayControl: boolean;

  title = 'Offprint';
  currentUser: User;

  searchForm = new FormGroup({
    query: new FormControl('', Validators.required)
  });

  constructor(private authService: AuthService, private _toppy: Toppy) {
    this.authService.currentUser.subscribe(x => this.currentUser = x);
  }

  ngOnInit() {
    this.overlayControl = false;
    const position = new RelativePosition({
      placement: OutsidePlacement.BOTTOM_RIGHT,
      src: this.login.nativeElement
    });
    this.overlay = this._toppy
      .position(position)
      .content(`<div>any HTML content</div>`, { hasHTML: true })
      .create();
  }

  open() {
    this.overlayControl = true;
    this.overlay.open();
    console.log("opened");
  }

  close() {
    this.overlayControl = false;
    this.overlay.close();
    console.log("closed");
  }

  controlLoginMenu() {
    if (this.overlayControl == false) {
      this.open();
    } else {
      this.close();
    }
  }
}

Any help would be appreciated.