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!

Or something like `<div *ngFor><my-component [source]=item></my-component></div> — Oliver
– Oliver, Commented Jun 12, 2018 at 9:32
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 :-) — Matthias
– Matthias, Commented Jan 13, 2019 at 11:28

bugs · Accepted Answer · 2018-06-12 09:26:11Z

4

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

answered Jun 12, 2018 at 9:26

bugs

15.4k6 gold badges53 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Don Thomas Boyle Over a year ago

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

MarkusAfricanus Over a year ago

@DonThomasBoyle, anyway you would recommend to solve this? I'm experiencing a problem where my 'create' instance of a component is referecing an 'edit` instance's provided entity

aj go Over a year ago

Use reactiveforms. its very useful together with ngModel

manish kumar · Accepted Answer · 2018-06-12 09:26:29Z

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.

Collectives™ on Stack Overflow

Multiple instances of the same Angular 6 component

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related