CODEWITHSUNDEEP
javascriptangulartypescriptdata-binding
Muirik
Muirik

Reputation: 6289

Binding to Correct Service Call in My Angular 2 App

In my Angular 2 app I have several different components that display data for different groups. Each of the different groups has a different API service call. Other than the different data set, though, the tabular display/layout itself is the same for each one.

In the component for each respective group, I am using the service call like this (this one is for "group1"). I am subscribing to the data in my OnInit in my group1.component.ts:

ngOnInit() {
    this.group1Service.getGroup()
        .subscribe(resRecordsData => this.records = resRecordsData,
        responseRecordsError => this.errorMsg = responseRecordsError);
}

Now, what I'd like to do is cut down on the duplication (i.e. make it dry-er) by abstracting out the tabular display so I can just drop that into each component view as a child view. So the view for component 1, for instance would look like this ("table-display" is the part that's abstracted out in the below code):

<div class="page-view">
    <div class="page-view-left">
        <comp1-left-panel></comp1-left-panel>
    </div>
    <div class="page-view-right">
        <div class="page-content">
            <table-display></table-display>
        </div>
    </div>
</div>

My question is, how can I bind the right service call (i.e. the right component) to the "table-display" for each component? Would I use an @Input here, or perhaps square bracket binding?

Upvotes: 0

Views: 580

Answers (2)

Qaisar Nadeem
Qaisar Nadeem

Reputation: 2434

You can pass required data as Input to table-display component.

If all of the components shares same type of structure to show data in table. Then I would recommend to create a separate class for common data and pass the object of that common class.

You can write a mapper function in each component which will return the required data to table-display , alternatively if it's a simple JSON like structure then you can pass it on fly.

e.g

Let's say there are 4 attributes you need to show in table-display , We create common.ts

export class Common {
col1: string; #whatever data structure you need
col2: number;
col3: number[];
col4: Object;
constructure(col1: any,col2: any,col3: any,col4: any){
this.col1 = col1;
//set other attributes similarly

}

}

no in component1.component.ts

import {Common}  from './path_to_common.ts'
#other imports here
@component {
selector: 'app-component1',
template: "your about template"
}
export class Component1Component implements OnInit{

common: Common; #this is the common attribute you will pass to **table-display**

constructure(component1_service: Component1Service){
}

ngOnInit(){

#get your data from service here
#now set **common** attribute here by settings 4 attributes we defined
#e.g
this.common = new Common(service_record.col1,service_record.col2....)
}

}

that's it now you can pass this common attribute as input by:

in your component templates

<table-display [common]="common"></table-display>

now write TableDisplayComponent

import {Input} from '@angular/core'
`import {Common}  from './path_to_common.ts'
#other imports here
@component {
selector: 'table-display'
template: `what ever your template is to show table`
}

export class TableDisplayComponent{

@Input() common: Common; #This common will be passed as input from all of your components
}

Upvotes: 1

Ben Richards
Ben Richards

Reputation: 3575

Yes, you would use an input on your table-display component and fill it from the parent component:

<table-display [Data]="arrayOfData"></table-display>

Where [Data] is define in your table-display as:

@input Data: Array<any>;

Upvotes: 1

Related Questions