is there a way lazy load a component in angular 2 dart?

Question

I have a component that uses another component with a ngIf statement. I would like to only load the second component once the ngIf evaluates to true.

EDIT: found an article that can almost do what I need: https://medium.com/@matanlurey/lazy-loading-with-angular-dart-14f58004f988. However, after the library loaded, it takes the whole view of the component. In my case, I need to insert it into a specific place in the html of the parent component.

Something like:

import '../other/edit_component.dart' deferred as otherEdit;

@Component(
    selector: 'edit-component',
    template: '<other-component *ngIf="canOther"></other-component>
    <button type="button" (click)="go()"></button>',
    directives: const [
      otherEdit.OtherComponent
    ]
)
class EditComponent {
  @Input()
  bool canOther = false;

  go() {
    otherEdit.loadLibrary();
    canOther = true;
  }
}

So you actually want to lazy load a component not a directive. You want a directive to trigger lazy loading. — Günter Zöchbauer, Mar 31 '17 at 20:45

score 2 · Answer 1 · answered Mar 31 '17 at 21:48

2

I do not think you can do it directly. What you can do instead is using DynamicComponent from Angular2_components and pass the type after lazily loading it.

answered Mar 31 '17 at 21:48

rkj

8,787
2
29
35

score 0 · Accepted Answer · answered Apr 18 '17 at 14:02

Just made it work. Used the DynamicComponent as example from rkj answer.

// the lib that has the component to be loaded
import 'package:somecomponent.dart' deferred as mycomponent;

class mainComponent {
  // <div #holder></div> element that we will append the component
  @ViewChild('holder', read: ViewContainerRef)
  ViewContainerRef holder;

  // this will load the component dynamically
  final DynamicComponentLoader _componentLoader;

  load() {
    // clear the html
    holder.clear();

    // load the component dynamically
    ComponentRef componentRef = await _componentLoader
      .loadNextToLocation(componentType, holder);

    // set some attributes like you would with [attributes]="somevar"
    componentRef.instance
      ..attribute = somevar;
  }

  mainComponent(this. _componentLoader){}
}

Where is the `DynamicComponent` located? I cannot find and import it. — tenhobi, Sep 20 '17 at 15:08
@HoBi, it is SlowComponentLoader in Angular 4 and DynamicComponentLoader in Angular 2/3. — Jonathan, Sep 21 '17 at 17:24

is there a way lazy load a component in angular 2 dart?

2 Answers2