Geek Answers Handbook

Output an array of components in Angular 2

I am creating a modal component in Angular 2 (and TypeScript) that will have different views / pages. It will not have tabs, but the concept is pretty similar. Mostly I'm struggling to find an approach to this.

In my modal component, I want to display different views / pages. Each of them must be the component itself, because they do not have a common markup. In addition, they will retrieve data from service classes, so I need to be able to write specific logic for each view.

Basically, I want something like:

// Within my modal component template <div *ngFor="#view of views"> // Render view component here </div>

Where views can be an array of components, for example. My first and main problem is that I'm not sure how to display a collection of my views (components).

How can I infer a collection of components inside another component?

In addition, I need a way to hide and show representations, which is the only thing that has common views. I was thinking of adding the isActive variable to the views and showing / hiding them based on this. Would it be bad practice for the views components to either implement the ModalView interface, or go from the base class to add this logic? From my modal component, I want to be able to control which view is displayed, so I need views to have this common logic.

I hope this is clear what I want to do. The solution may be simple, but right now I'm a little confused about how to do this. Sample code would be greatly appreciated!

+6
source share
2 answers

You can create a “factory component” as a directive that loads the appropriate components using the DynamicComponentLoader based on the parameters that you pass from your modal.

 <component-factory *ngFor="#view of views" (loaded)="addComponent($event)" [name]="view.name" [visible]="view.visible"></component-factory> @Directive({ selector: 'component-factory' }) class ComponentFactory { @Input() name; @Input() visible; @Output() loaded = new EventEmitter(); constructor( private _dcl: DynamicComponentLoader, private _eref: ElementRef) { // import OneCmp, TwoCmp in this file... private components: { one: OneCmp, two: TwoCmp } ngOnInit() { this._dcl.loadNextToLocation( this.components[this.name], this._eref) // pass values to the loaded components // and send it instance to the parent .then((ref: ComponentRef) => { ref.instance.visible = this.visible; this.loaded.emit(ref.instance) }); } }
+4
source

Angular2 Dynamically Rendering Template

 import { Component, View, DynamicComponentLoader, ElementRef} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser' @Component({ selector: 'some-component', properties: ['greeting'], template: ` <b>{{ greeting }}</b> ` }) class SomeComponent { } @Component({ selector: 'app' }) @View({ template: ` <h1>Before container</h1> <div #container></div> <h2>After container</h2> ` }) class App { loader: DynamicComponentLoader; elementRef: ElementRef; constructor(loader: DynamicComponentLoader, elementRef: ElementRef) { this.laoder = loader; this.elementRef = elementRef; // Some async action (maybe ajax response with html in it) setTimeout(() => this.renderTemplate(` <div> <h2>Hello</h2> <some-component greeting="Oh, hey"></some-component> </div>

full code: https://github.com/guyoung/GyPractice-Angular2Advanced/tree/master/apps/dynamically_render_template

+1
source

More articles:


All Articles