CODEWITHSUNDEEP
angulartypescriptangular2-templateangular2-directives
cocoseis
cocoseis

Reputation: 1463

Dynamic components

What is the proper way to display components dynamically in a view?

As an example, I have a component which has a navigation and a view. Clicking a button in the navigation different sub-components should appear/disappear in the view. Each of the sub-components are of a different type.

import { Component, Input } from '@angular/core';
import { Controls } from './controls.service';

@Component({
  selector: 'Controlpanel',
  templateUrl: 'app/templates/controlPanel.component.html',
  directives: Controls.directives()
})
export class ControlPanelComponent {
  controls = Controls.objects;
  activeControl:string = Controls.objects[0].name;
}

--

<nav class="container-fluid">
    <div class="row">
            <a *ngFor="let control of controls" (click)="toggleControl(control.name, $event)" role="button" href="#" class=" text-uppercase"> 
                {{control.name}}
            </a>
    </div>
</nav>
<div>
    <this is where i want the sub-component to appear/>
</div>

Upvotes: 1

Views: 190

Answers (1)

Marcel Hoekstra
Marcel Hoekstra

Reputation: 1488

You can do something like adding each control you want to load on your form and add an *ngIf to each control but I wouldn't go that way.

Add a where you want to load the directive. And create a childRoute that shows the component(directive) you want to show:

<nav class="container-fluid">
    <div class="row">
            <a *ngFor="let control of controls" (click)="toggleControl(control.name, $event)" role="button" href="#" class=" text-uppercase"> 
                {{control.name}}
            </a>
    </div>
</nav>
<div>
      <!-- this is where you show your sub-component t by routing -->
     <router-outlet></router-outlet>

    </div>

Upvotes: 2

Related Questions