Can't bind to property 'satPopoverAnchorFor' with the component @ncstate/sat-popover

Question

Sorry for this basic question. I'm new with Angular project.

I would like to use the component @ncstate/sat-popover with an Angular material table. The purpose is to get inline editing of fields in the rows of my table. I get my inspiration from this example from stackblitz. https://stackblitz.com/edit/inline-edit-mat-table?file=app%2Fapp.component.html

Example of the way i've used it:

    <mat-cell *matCellDef="let row" [satPopoverAnchorFor]="p" (click)="p.open()">
      <ng-container *ngIf="row.consumption_id">
        {{row.consumption_id}}
      </ng-container>

      <span class="add-consumption_id" *ngIf="!row.consumption_id">
        Add a consumption id.
      </span>

      <sat-popover #p
          hasBackdrop
          xAlign="start"
          yAlign="start"
          (closed)="update(row, $event)">
        <inline-edit [value]="row.consumption_id"></inline-edit>
      </sat-popover>
    </mat-cell>

I get the error:

SCRIPT5022: Template parse errors:
**Can't bind to 'satPopoverAnchorFor' since it isn't a known property of 'mat-cell'.**
1. If 'mat-cell' is an Angular component and it has 'satPopoverAnchorFor' input, then verify that it is part of this module.
...

I've recreated 2 times this project with different version of Angular (8.0.0 and 8.1.0)

Everything looks correctly installed and imported in my project.

Any idea of what i've missed?

Thank you, Fred

Answer 1

In the latest release the attribute changed from [satPopoverAnchorFor] to [satPopoverAnchor].

 <td mat-cell *matCellDef="let product" [satPopoverAnchor]="p" (click)="p.open()">  {{product.case_height}}
        <sat-popover #p
        hasBackdrop
        xAlign="start"
        yAlign="start"
        (closed)="updateProduct(product,'case_height', $event)">

               <inline-edit [sku]="product.case_height" [fieldname]="'Case Height'" [fieldvalue]="product.case_height"></inline-edit>
        </sat-popover>


 </td>

Answer 2

Try this <mat-cell *matCellDef="let row" satPopoverAnchorFor="p" (click)="p.open()">