1

I added PopperJS 2.11 as dependencie. Then I try to use Popper in AppComponent but I'm not sure how to call instance of Popper. Here is my code:

app.component.html:

<button #button>Click</button>
<div #tooltip>
    lorem ipsum
</div>

app.component.ts:

import { Component,OnInit, ViewChild} from '@angular/core';
import { createPopper, VirtualElement, Instance } from '@popperjs/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
  @ViewChild('button') button: Element | VirtualElement;
  @ViewChild('tooltip') tooltip: HTMLElement;

    ngAfterViewInit(){
        createPopper(this.button, this.tooltip, {
            modifiers: [
              {
                name: 'offset',
                options: {
                  offset: [0, 8],
                },
              },
            ],
        });
    }
    
}

But in console I have: createPopper.js:209 Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.

Romek
  • 21
  • 1
  • 4
  • Do you know about [`@angular/cdk/overlay`](https://material.angular.io/cdk/overlay/overview)? No, it has nothing to do with `@angular/material`... – Pieterjan Mar 03 '22 at 17:48

1 Answers1

1

Update the problem is that you are write

**WRONG**
@ViewChild('button') button: Element | VirtualElement;
@ViewChild('tooltip') tooltip: HTMLElement;

With viewChild you get a ElementRef

  @ViewChild('bt', { static: true }) button!: ElementRef
  @ViewChild('tooltip', { static: true }) tooltip!: ElementRef

And use

this.popperInstance = Popper.createPopper(this.button.nativeElement,
             this.tooltip.nativeElement)

See a stackblitz with the first example of the tutorial

NOTE: Don't forget install @propperjs/core

npm i @popperjs/core

see stackblitz

Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • Thanks a lot :) Now I know what I did wrong. Could you just explaine me what mean `!:` ? – Romek Mar 03 '22 at 19:06
  • In "strict mode" (really is about typescript [strictPropertyInitialization](https://www.typescriptlang.org/tsconfig#strictPropertyInitialization)) you need initialize all the variables. the `!` say to Angular, hey! I know what I'm doing. See this [link](https://indepth.dev/posts/1402/bulletproof-angular) to get a better explain – Eliseo Mar 03 '22 at 20:14