My impressions on alpha.3

Look at what I got:

As you can notice from the gif above,:

1. The flickering issue was solved by using the @Input() disableBackdrop
2. The content of the popover is different for each option in select

The second observation has an hidden implication: as I need one anchor to each sat-popover, I was forced to encapsulate every option content in a component - see the code bellow. The mat-option content is the anchor for the sat-popover - ideally, the anchor would be the mat-option itself not its content - but I’ll talk about this later in this issue.

Sorry about the awkward example (bellow) to show my point, but I tried to reproduce approximately what I have in above gif [edited => the code bellow is in stackblitz.com].

<div class="full-width" [satPopoverAnchorFor]="popover" satDisableClick 
    (mouseenter)="openpopover()" (mouseleave)="closepopover()">
  {{message}}
</div>
<sat-popover #popover xPosition="after" [overlapAnchor]="false" [disableBackdrop]="true">
  <div class="popover-class">
      <ng-container *ngFor="let t of myArray; let i=index">
        <br *ngIf="i > 0">
        <strong>
          {{t}}
        </strong>
      </ng-container>
  </div>
</sat-popover>

and in the class:

  /** 
   * I could use the SatPopover here, as it now has the open() and close() properties
   *   but it doesn't solve the problem I'll describe bellow   
   */
  @ViewChild(SatPopoverAnchor) anchor: SatPopoverAnchor;

  @Input() message: string;
  @Input() myArray: any[];

  openpopover() {
    this.anchor.openPopover();
  }

  closepopover() {
    this.anchor.closePopover();
  }

Then I can use this component like this (mat-form-field’s width is important to show my point):

<mat-form-field style="width: 400px">
    <mat-select placeholder="Select an option">
        <mat-option *ngFor="let oneArray of arrayOfArrays; let i = index" [value]="oneArray">
            <app-popover [message]="i" [myArray]="oneArray"></app-popover>
       </mat-option>
    </mat-select>
</mat-form-field>

arrayOfArrays = [
  [a,b,c],
  [d,f],
  [g,h,i]
]

As I need an unique anchor for each popover, I made this custom component to encapsulate each of the popover and it’s anchor.

As I said earlier, ideally, the anchor should be the mat-option element, but I couldn’t figure out how to put it in the custom component. I tried ngProjectAs="mat-option", but apparently mat-option is not a ng-content element:

<mat-select placeholder="Turma">
    <app-popover *ngFor="let oneArray of arrayOfArrays; let i = index" [message]="i" 
         [myArray]="oneArray" ngProjectAs="mat-option"></app-popover>
</mat-select>

As it didn’t work, what I managed to do is encapsulating mat-option content along with sat-popover instead of mat-option itself. So I’m using a div inside the custom component to hold the option content and be the anchor for the popover.

This have a side effect: I had to override the mat-option-text class so it takes 100% of the available mat-option width, otherwise the popover would apear in the middle of the mat-option instead of by its side. Even overriding the mat-option-text class, if you look carefully, you can see in the gif that the popover overlapped the mat-select pannel a little bit.

The overlapping is acceptably small, but if I had to make it goes completely outside the panel, I don’t kwow what I could do without hacking the component.

The summary of the problem: When I have an undetermined number of dynamically fed sat-popover in a component, I’m not able (at least I couldn’t figure out how) to put an anchor in a component directly, without encapsulating the popover, what may have side effects in some specific situations like what is discribed in this issue. This would happen also if I was using another component with a separate trigger element, like mat-menu. The problem is to put the anchor in the correct element, once it is buried inside another custom component.

1. Is it possible to use another aproach to do what I’m trying to?
2. Is this a limitation of sat-popover? Or a limitation of mat-option?
3. Is there any possible workaround?

@willshowell

[julianobrasil]

BTW, I really liked that speed dial example in stackblitz.com.

[julianobrasil]

did you ever figure out a good way to get the onOpen event working to show immediately?

No. I’ve noticed material tooltip has the same behavior. We are not alone 😄

In the back of my mind, I’m considering extending the anchor in ways like [satTooltipAnchorFor]=“tooltipPopover” and [satMenuAnchorFor]=“menuPopover”

You can be proud of your work. I wouldn’t change it. It’s so easy to use and so versatile at the same time. I doubt someone will ever complain.

Oh, and I haven’t close this because I was not sure whether you were using it to track anything. IMO it can be closed. The onOpen thing is not directly related to satPopover. It’s kind of a general js question.