Multiple instances of the same Angular 6 component

Question

I'm building a dashboard displaying data from a large JSON object containing information on various servers. In the dashboard i will have 12 squares containing the exact same information but from different sources (CPU usage, ram usage, errors list etc.).

So i'm wondering if it is possible to dynamically scaffold one component that accepts arguments, for example 3 numbers and a string for lets say ram, cpu, power and IP address (the actual thing is closer to 20 different datapoints), and then replicate it on init using an Angular 6 component, but passing different data to each of the 12 different instances of the same component. I'd assume that using Bootstrap i'd be able to format sizing and placement with a grid.

A simple example would be highly appreciated!

Solution 1

You can define your component to take the required properties as inputs and reuse the same component several times with different inputs.

In the example below you define the HelloComponent with a name property, the initialise multiple instances of HelloComponent with different inputs.

Child

export class HelloComponent  {
  @Input() name: string;
}

Parent

<hello name="Ben"></hello>
<hello name="Jack"></hello>
<hello name="Roger"></hello>

---

Demo

Solution 2

app.component.html

<data-component [cpu]="cpu" [usage]="usage" [otherData]="otherData"></data-component>
<data-component [cpu]="cpu1" [usage]="usage1" [otherData]="otherData1"></data-component>
<data-component [cpu]="cpu2" [usage]="usage2" [otherData]="otherData2"></data-component>
<data-component [cpu]="cpu3" [usage]="usage3" [otherData]="otherData3"></data-component>
<data-component [cpu]="cpu4" [usage]="usage4" [otherData]="otherData4"></data-component>

app.component.ts

here you can have logic for all the cpu,usage,other data values taken from different endpoints and initialise.

data.component.html

//you card logic.

likewise you can control various instance of the component via app.component.ts via models.

Comments

[Oliver]

angular.io/guide/dynamic-component-loader

[Oliver]

Or something like `<div *ngFor><my-component [source]=item></my-component></div>

[Matthias]

I upvoted because I think it's a valid question. However I think if you walk through the tour of heroes you might have a clue about how to solve this :-)

[Don Thomas Boyle]

The problem with this one is that when you are using something like radio buttons in the html the "name" attribute is carried over into another component of the same type