Angular Dart Portals

user_1012797 0
Viewed 59

I'm looking for some examples or documentation for how to implement DOM or component Portals in Angular Dart. I've found the portal.dart source and the definition of the Portal library in Angular component package docs, but I'm not familiar enough with portals to be able to implement them with only these resource.

I want to portal a <li> to another container for dragging using CSS transform.

something like,

DOMPortalHost portalHost;
Portal<HTMLElement> portal;

@ViewChild('host')
DivElement host;

void onMouseDown(Element element) {
    this.portal = Portal(element);
    this.portalHost = DOMPortalHost(host);

    this.portalHost.attach(portal);
}

void onMouseUp(Element element) {
    this.portalHost.Detach();
}

Thank you.

angular-dart angular
1 Answers

You need a host that extends BasePortalHost (a good example is PortalHostDirective) and the portal items can be TemplatePortal or ComponentPortal.
The host attaches the items and the items dettaches themselves.

MaterialStepperComponent is a good complete example.

However, I think that you should work with Lists of your business model by swapping them on mousedown and then let the ngFor takes care of printing them.

user_1277350
Related