1

I'm currently building an Angular application, where I was trying to make the code highly reusable with the help of directives(as components).

<div class="container container-fluid" >
  <div class="row">
    <table class="table table-responsive table-hover">
      <thead class="thead-inverse">
      <tr>
        <th *ngFor="let column of columns">{{column.header}}</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let row of rows;trackBy: trackByID;">
        <td *ngFor="let column of columns">{{row[column.field]}}
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <xfd-progressbar></xfd-progressbar>
  <div class="row col-lg-offset-5">
    <ngbd-pagination-basic></ngbd-pagination-basic>
  </div>
</div>

The above is a directive I created to have a reusable table. My general requirement was that I'll have one table per page.

Here's the corresponding component for the same -

import {Column} from "../models/Column";
import {Component, OnInit} from "@angular/core";
import {PaginationService} from "../services/PaginationService";
import {GridLoadUtil} from "../util/GridLoadUtil";
import {ProgressBarService} from "../services/ProgressBarService";

/**
 * Created by ppandey on 6/12/2017.
 */

@Component({
    selector: 'xfd-table',
    templateUrl: './table.component.html',
    styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit{
  columns: Column[]= [];
  rows: any[] = [];

  constructor(private paginService: PaginationService,
            private tableLoader: GridLoadUtil,
            private progressBarService: ProgressBarService) {
    this.paginService.itemsToDisplayChange.subscribe((value) => {
      this.rows = value
    });

    this.tableLoader.columnsChange.subscribe((values) => {
      this.columns = values;
    });
  }

  ngOnInit() {
    this.tableLoader.beforeDataLoaded();
    this.progressBarService.startProgress();
  }
}

As you can see, my component uses Services(GridLoadUtil), to provide it with the data, which makes the code highly decoupled.

Here's where I got into a pickle. If I want to have multiple tables on a single page, with different data and structure, it can't as the service to which each component is tied to is Singleton.

I can choose not to inject the service, and provide each service as a setter, but in that case, I will need to create subclasses for each service, which currently I didn't need to. Also, my code will become coupled.

Is there any direction that you guys think I can take to solve this problem?

Thanks, Pratik

1 Answer 1

1

You can create a directive to provide the service there. Angulars DI will find that provider when it looks for the TableLoader service, because it's the closest to the component (if the component doesn't provide one itself):

@Directive({
  selector: [tableLoader1],
  providers: [{provide: GridLoadUtil, useClass: GridLoadUtil1}],
})
class TableLoader1Directive {}

@Directive({
  selector: [tableLoader2],
  providers: [{provide: GridLoadUtil, useClass: GridLoadUtil2}],
})
class TableLoader2Directive {}

Then you can use it like

<xfg-table tableLoader1></xfg-table>
<xfg-table tableLoader2></xfg-table>
9
  • Thanks @Gunter. to make sure I get this right, the directive will just be used to differentiate the service I want to provide for the component. Also, both the directives provided in the example have the same class name, typo? or valid?
    – Pratik
    Aug 20, 2017 at 13:50
  • Yes, the directive is just to provide a service. Depending on your use case, you can also pass a value to an input in the directive and configure your service with this value by injecting the service to the directive itself and pass the value to the service. If this works for your use case, you don't need multiple directives (but you can also mix these approaches). Sorry, the duplicate name was a copy-paste error. Aug 20, 2017 at 13:53
  • 1
    It does seem like it will work. Will give it a shot tomorrow and vote your answer as correct. For now have upvoted it :) Thanks !
    – Pratik
    Aug 20, 2017 at 14:19
  • 1
    You can't modify providers depending on an input, but you can inject a provider from the directive to the constructor of the directive, and then in ngOnInit() you can do this.tableLoader.setConfig(this.someInput);. The component and the directive get the same service instance injected, therefore when you modify the status from the directive, it effects the component as well. You need to ensure that the component doesn't cause actions on the service before ngOnInit of the directive was called, but if you use Observables (or BehaviorSubject), this shouldn't be an issue. Aug 21, 2017 at 15:24
  • 1
    No problem! Marked your answer as correct as it seems like a correct answer. Might ask you a question if I do get stuck :)
    – Pratik
    Aug 21, 2017 at 19:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.