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:

&lt;div&gt;
  &lt;!-- list 1 button --&gt;
  &lt;button md-button
          (click)="showFirstList()"
          class="md-primary"&gt;List 1
  &lt;/button&gt;

  &lt;!-- list 2 button --&gt;
  &lt;button md-button
          (click)="showSecondList()"
          class="md-primary"&gt;List 2

  &lt;/button&gt;

  &lt;!-- list 3 button --&gt;
  &lt;button md-button
          (click)="ThirdList()"
          class="md-primary"&gt;List 3

  &lt;/button&gt;
&lt;/div&gt;
    &lt;md-content&gt;

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


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


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

    &lt;/md-content&gt;


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;
  }

}
Minimize component state

It's better to use a single field listToShow rather than having a show* field per each list. You don't have to change anything in your template if you wrap the show*List() around listToShow using accessor syntax.

private listToShow: number = 1;
get showingListOne(): boolean { return this.listToShow === 1; };
get showingListTwo(): boolean { return this.listToShow === 2; };
get showingListThree(): boolean { return this.listToShow === 3; };

public showFirstList(): void {
  this.listToShow = 1;
}

public showSecondList(): void {
  this.listToShow = 2;
}

public showThirdList(): void {
  this.listToShow = 3;
}


Injectable

I am very positive your component does not have to be annotated with @Injectable(), therefore it should not be. The component is not really being injected anywhere, right?