Angular2 - Bootstrap an app with multiple components

Question

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?

There is no such thing as a render() method in Angular components. But yes, a parent component can display 3 child components. — JB Nizet
– JB Nizet, Commented Feb 28, 2017 at 11:32
render() would be a custom function that do things, such as calling another subcomponent (ie: resultTableComponent, renderChartComponent). — Pennywise83
– Pennywise83, Commented Feb 28, 2017 at 11:53
You don't "call" components in angular. You should first learn how components work. Practice on simple examples, and then start coding to adapt your design to the reality of how the framework works. — JB Nizet
– JB Nizet, Commented Feb 28, 2017 at 12:00

Fredrik Lundin Grande · Accepted Answer · 2017-02-28 12:17:39Z

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!

What is not clear to me is how to interact with the child component. For example, if I define a function that shuffles data in PanelComponent, how can I call from the Parent component?

Collectives™ on Stack Overflow

Angular2 - Bootstrap an app with multiple components

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related