Feature Request: Ability to attach a template as an overlay

[baleeds]

I'm looking for an example of an IgxOverlay that isn't attaching a new class component, but is instead attaching an element in the view of the same component that calls attach (ideally a template ref, not element ref). It seems there is no good way to accomplish this, and there certainly are no viable examples in the documentation.

We have managed to achieve the desired result by using [hidden] when the overlay isn't shown, but this breaks the auto-positioning strategy because at the time of calculation, the element to be attached is still hidden.

Also, the minimum size in the overlay settings doesn't fix this issue. Perhaps there are problems with that setting.

[wnvko]

@baleeds
Overlay attach has two overloads. You can provide either elementRef of component. In your case you should provide elementRef pointing to the markup you need to show in the overlay.

Note you can simplify all this by using igxToggle directive. igxToggle directive allows easily toggle some content and it internally uses igxOverlayService.

Overlay cannot show templateRef - this is a nice feature request.

[baleeds]

@wnvko Thanks for the swift reply!

I believe a previous dev spent a lot of time trying to get igxToggle to work for our usecase and was unsuccessful. I could try again if this path doesn't work.

We do understand the two overloads, but we don't understand how to use an elementRef without the content of the overlay showing before being attached? In order to get an elementRef, there is an element in the view. If the element is in the view, it's being displayed, regardless of whether it's attached or not.

That's why I was asking for examples, to see how you would expect us to use the elementRef attach function in a "normal" seeming way.

Overlay cannot show templateRef - this is a nice feature request.

This would be a very nice feature!

[baleeds]

To add, if we do something with visibility: hidden, that doesn't remove the element from the element flow, meaning it still takes up real space before it's overlayed. If we do something with display: none or position: absolue, it breaks the AutoPositioningStrategy from calculating the correct position.

[wnvko]

@baleeds
Yes, when using igxToggle you should have the element in the view and it is hidden. What toggle does is showing the element just before pass it to the overlay by setting the hidden to false.

Regarding template here is a workaround how you can show it in the overlay:

    public open(template: TemplateRef<any>) {
        // Create the template's embedded view. Note you may pass any context if you need here
        var view = template.createEmbeddedView({'context': 'someValue'});

        // Force angular to detect changes in order to initialize the view's root nodes
        view.detectChanges();

        // Create a new ElementRef from the view's node (hope you have single rootNode in the template)
        // and pass the ElementRef to overlay's attach method
        var id = this.overlay.attach(new ElementRef(view.rootNodes[0]));
        this.overlay.show(id);
    }

Finally about the feature - can you please rename your issue to something requesting igxOverlay to be able to show Template, so we can mark this as feature request?

[baleeds]

@wnvko

Yes, when using igxToggle you should have the element in the view and it is hidden. What toggle does is showing the element just before pass it to the overlay by setting the hidden to false.

igxToggle has fixed the issue, and the usage is a lot more intuitive than the overlayService. Thank you very much for the assistance.

I will adjust the issue name to reflect the feature request.

[github-actions]

There has been no recent activity and this issue has been marked inactive.