Angular 2 sortable lists

I wrote a simple and small projects that present 3 buttons, each one loads a different list to the screen on the same place but not in the same time.

In my HTML, I think I can maybe use some more generic way to present the lists:

<div>
  <!-- list 1 button -->
  <button md-button
          (click)="showFirstList()"
          class="md-primary">List 1
  </button>

  <!-- list 2 button -->
  <button md-button
          (click)="showSecondList()"
          class="md-primary">List 2

  </button>

  <!-- list 3 button -->
  <button md-button
          (click)="ThirdList()"
          class="md-primary">List 3

  </button>
</div>
    <md-content>

      <div *ngIf="showingListOne">
        <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOneToDisplay | async">
          <div class="list-bg" *ngFor="#item of listOneToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
            ID: {{item.id}} <p></p> name: {{item.name}}
          </div>
        </div><br><br>
      </div>


      <div *ngIf="showingListTwo">
        <div dnd-sortable-container [dropZones]="['zone-two']" [sortableData]="listTwoToDisplay | async">
          <div class="list-bg" *ngFor="#item of listTwoToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
            ID: {{item.id}} <p></p> age: {{item.age}}
          </div>
        </div>
      </div>


      <div *ngIf="showingListThree">
        <div dnd-sortable-container [dropZones]="['zone-three']"  [sortableData]="listThreeToDisplay | async">
          <div class="list-bg" *ngFor="#item of listThreeToDisplay | async; #i = index" dnd-sortable [sortableIndex]="i">
            ID: {{item.id}} <p></p> age: {{item.age}}
          </div>
        </div>
</div>
      </div>

    </md-content>

Now this is my component.ts. I know it's horrible and I would love to get suggestions how cI can make it look better and not repetitive. Specifically, how I can use enums instead of the booleans to make it look much better, and where I should put the calls I do for the service to get the data. It's an API calls and it doesn't make sense to call them all three when the class is loaded.

This is my sorting-lists.component.ts:

@Component({
  selector: 'sorting-lists',
  styles: [require('./sorting-lists.css')],
  directives: [DND_DIRECTIVES],
  providers: [DND_PROVIDERS],
  template: require('./sorting-lists.component.html')
})

@Injectable()
export class MyCmp implements OnInit {

  listOneToDisplay  = this._myService.getFirstListData();
  listTwoToDisplay = this._myService.getSecondListData();
  listThreeToDisplay = this._myService.getThirdListData();

  showingListOne = false;
  showingListTwo = false;
  showingListThree = false;

  constructor(private _myService: MyService) {
  };


  public showFirstList(): void {
    this.showingListOne = true;
    this.showingListTwo = false;
    this.showingListThree = false;
  }

  public showSecondList(): void {
    this.showingListTwo = true;
    this.showingListOne = false;
    this.showingListThree = false;
  }

  public showThirdList(): void {
    this.showingListThree = true;
    this.showingListTwo = false;
    this.showingListOne = false;
  }

}