Is possible to have two template for single call service in AngularJS 2

Question

My service return two list of items and I want to render each list to difference selector

this.http.get(url).map(res => res.json())

the json returns { list1: [...], list2: [...] }

and I have two <div> to render list1 and list2.

Is it possible to do with Angular JS 2?

Answer 1

class MyService {
  private _list1;
  private _list2;

  getList1() {
    if(this._list1) {
      return Observable.of(this._list1);
    } else {
      return _getList(1);
    }
  }

  getList2() {
    if(this._list2) {
      return Observable.of(this._list2);
    } else {
      return _getList(2);
    }
  }

  private _getList(listNo) {
    return this.http.get(url).map(res => {
      var json = res.json();
      this._list1 = value.list1;
      this._list2 = value.list2;
      if(listNo == 1) {
        return json.list1;
      }
      if(listNo == 2) {
        return json.list2;
      }
    });
  }
}

@Component({
  selector: 'my-component1',
  pipes: [KeysPipe],
  template: `
  <ul>
     <li *ngFor="let item of list | keys">{{item.key}} - {{item.value}}</li>
  </ul>
`
})
export class MyComponent1 {
  constructor(private MyService myService) {
    myService.getList1().subscribe.(value => this.list = value);
  }
}

@Component({
  selector: 'my-component2',
  pipes: [KeysPipe],
  template: `
  <ul>
     <li *ngFor="let item of list | keys">{{item.key}} - {{item.value}}</li>
  </ul>
`
})
export class MyComponent2 {
  constructor(private MyService myService) {
    myService.getList2().subscribe.(value => this.list = value);
  }
}

If you want to render both lists in the same component it can be simplified of course.

For the KeysPipe see access key and value of object using *ngFor

Answer 2

I don't know how you trigger the call for your request. Another component for example.

You could also define two EventEmitter properties (one per list) into your service to emit events when the response of your HTTP call is there. Two components can subscribe on it to be notified when data are there.

• Service implementation

  export class ListService {
    list1Event: EventEmitter<any> = new EventEmitter();
    list2Event: EventEmitter<any> = new EventEmitter();
  
    getLists() {
      return this.http.get(url).map(res => res.json())
        .subscribe(
          (data) => {
            this.list1Event.emit(data.list1);
            this.list2Event.emit(data.list2);
          }
        );
    }
  }
  

• Component #1 implementation

  @Component({
    selector: 'my-component1',
    template: `
      <ul>
       <li *ngFor="#item of list">{{item.name}}</li>
      </ul>
    `
  })
  export class MyComponent1 {
    constructor(private service:ListService) {
      this.service.list1Event.subscribe.(data => {
        this.list = data;
      });
    }
  }
  

• Component #2 implementation (similar but for list2)

• Component that triggers the execution of the HTTP call

  @Component({
    selector: 'other-component',
    template: `
      <div (click)="executeRequest()">Execute request</div>
    `
  })
  export class OtherComponent {
    constructor(private service:ListService) {
    }
  
    executeRequest() {
      this.service.getLists();
    }
  }
  

See this question for more details:

• Delegation: EventEmitter or Observable in Angular2