CODEWITHSUNDEEP
htmlangulartypescriptoverlay
Foxhunt
Foxhunt

Reputation: 870

Angular - Overlay

I created an overlay in a project based on the example : https://material.angular.io/cdk/overlay/

In my component Html :

<div class="row justify-content-center">
  <div class="col-8">
     Some Infos here
     <button type="button" (click)="isOpen = !isOpen" cdkOverlayOrigin #originOverlay="cdkOverlayOrigin" class="btn btn-success"><fa-icon icon="check"></fa-icon><span>Buy</span></button>
  </div>
</div>

<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="originOverlay" [cdkConnectedOverlayOpen]="isOpen">
  <div>This is my tooltip</div>
</ng-template>

Then i added the line isOpen = false; in my component.ts and the import in my global app.module : OverlayModule

On the button code line, I have this error showing up : No directive found with exportAs 'cdkOverlayOrigin'

Upvotes: 1

Views: 1832

Answers (1)

Sravan Ch
Sravan Ch

Reputation: 56

I have replicated your same code in stackblitz and it seems to work fine for me. You must have forgotten one of the packages. @angular/material also needs @angular/cdk for this to work.

You can check that the code is working here.

Link to stackblitz

Upvotes: 1

Related Questions