CODEWITHSUNDEEP
angular
Pennywise83
Pennywise83

Reputation: 1784

Angular2 - Bootstrap an app with multiple components

I'm new to Angular2 and I have some thoughts on how i have to bootstrap the application I want to create.

Basically I need to create a simple dashboard with multiple panels. The panels itself is a common object that show some results.

Here is an example model of the panel object (I'm using TS):

name :string;
data: Array<string>;

Here is link of the simple diagram of the structure:

The dashboard component creates 3 panels, passing a set of data to each panel. The panel receive the data from dashboard, run the render() function and show data in his own view.

Is this a right architecture approach?

Upvotes: 0

Views: 241

Answers (1)

Fredrik Lundin Grande
Fredrik Lundin Grande

Reputation: 8186

You simply specify your child components in your parents template by creating elements with their selector name. To pass data, you can use the @Input decorator from @angular/core.

Have a look at the official docs.

Here is how your Dashboard (parent) might look: 

import { Component } from '@angular/core';

@Component({
   selector: 'dashboard-component', 
   template: `
      <panel-component [name]="'Panel One'" [data]="['1', '2']" ></panel-component>
      <panel-component [name]="'Panel Two'" [data]="['3', '4']" ></panel-component>
      <panel-component [name]="'Panel Three'" [data]="['5', '6']" ></panel-component>          `
})
class DashboardComponent { }

And the Panel (child)

import { Component, Input } from '@angular/core';

@Component({
   selector: 'panel-component', 
   template: `<p>{{name}}</p> 
              <div *ngFor="let d of data">
                 <p>{{d}}</p>
              </div>
             `
})
class PanelComponent {
   @Input('name') name: string;
   @Input('data') data: Array<string>;
}

Here is a plunker that you can try!

Upvotes: 1

Related Questions