angularangular-dart

Angular Dart Portals

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.

Solution

  • 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.