2
\$\begingroup\$

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

}
\$\endgroup\$
1
\$\begingroup\$

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?

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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