angular2 - make a variable more variable

Question

So I am not sure whether the question is stupid or not, however I feel like my current solution isn't the best.

So I am basically working on a pricing table on the backend. There a 3 different status (plural?). First one is display, second one is edit, third one is 'hidden' and there is a + button to ad a new one.

So now for each column I have prepared three scenarios which I than show/hide with ngIf. I started now working on the actual functions. Like changing when I click buttons and so on.

import { Component, ViewEncapsulation } from '@angular/core';


declare var jQuery: any;

@Component({
  selector: '[packages]',
  templateUrl: './packages.template.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./packages.style.scss']
})
export class PackagesComponent {

  tier1Status = '';
  tier2Status = '';
  tier3Status = '';
  currentTiers = 1;

  ngOnInit() {
    this.checkTiers();
  }
  checkTiers() {
    if (this.currentTiers === 1) {
      this.tier1Status = 'show';
      this.tier2Status = 'notSetUp';
      this.tier3Status = 'hide';
    }
    else if (this.currentTiers === 2) {
      this.tier1Status = 'show';
      this.tier2Status = 'show';
      this.tier3Status = 'notSetUp';
    }
    else if (this.currentTiers === 3) {
      this.tier1Status = 'show';
      this.tier2Status = 'show';
      this.tier3Status = 'show';
    }
  }
  addTier(tierNumber: number) {
    if (tierNumber === 1) {
      this.tier1Status = 'edit';
    } else if (tierNumber === 2) {
      this.tier2Status = 'edit';
    } else if (tierNumber === 3) {
      this.tier3Status = 'edit';
    }
  }

}

So as already mentioned, I am not sure whether this is the best solution. It seems a little complicated. I was wondering whether there is something to make a variabel variabel. Sounds stupid, but basically to have a variabel like tierStatus[x] and when I click a button I always pass which tier is meant. Sorry I am quiet new to angular2 and typescript/javascript in general. Maybe be something like this

clickEdit (tierNumber: number) {
        tierStatus[tierNumber] = 'edit';
      }

Thanks a lot. Cheers

Juan · Accepted Answer · 2017-05-31 21:04:20Z

1

Use an enumeration. Enums allow you to define a set of named numeric constants:

export enum Tiers {
  Show,
  NotSetup,
  Hide,
  Edit
}

So, Show will hold 0 as its value, NotSetup 1, and Hide 2 and Edit 3.

If you want to give them specific fixed numeric values:

export enum Tiers {
  Show = 1,
  NotSetup = 2,
  Hide = 3,
  Edit = 4
}

I don't know what tiers 1, 2 and 3 mean, so for display purposes I gave them meaning with an enumeration called Rewards with the values Basic, Classic and Pro.

And then your code would look something like this:

  tier1Status = null; // null Or maybe create a Tiers.NotSet value.
  tier2Status = null;
  tier3Status = null;
  currentTiers = Rewards.Basic;

  ngOnInit() {
    this.checkTiers();
  }

  checkTiers() {
    switch (this.currentTiers) {
      case Rewards.Basic:
        this.tier1Status = Tiers.Show;
        this.tier2Status = Tiers.NotSetup;
        this.tier3Status = Tiers.Hide;
        break;
      case Rewards.Classic:
        this.tier1Status = Tiers.Show;
        this.tier2Status = Tiers.Show;
        this.tier3Status = Tiers.NotSetup;
        break;
      case Rewards.Pro:
        this.tier1Status = Tiers.Show;
        this.tier2Status = Tiers.Show;
        this.tier3Status = Tiers.Show;
        break;
  }

  addTier(tierNumber: Rewards) {
    switch (tierNumber) {
      case Rewards.Basic:
        this.tier1Status = Tiers.Edit;
        break;
      case Rewards.Classic:
        this.tier2Status = Tiers.Edit;
        break;
      case Rewards.Pro:
        this.tier3Status = Tiers.Edit;
        break;
    }
  }

Code is untested, of course, I just want to show you a good use case for enums where you can give meaning to your numbers.

Click Here for more info on enums

You will know what's best for your app and how to get enums to work for you.

If you want to access the string value, you can: Tiers[Tiers.show] === 'Show' => true

Updated: After comment I understand better what you want. You could use a Map (or a Set), and do something like this:

You could use something like a Map or a Set.

// This would be the values of your Tiers enum
Tiers.First
Tiers.Second
Tiers.Third

// And a Status enum
Status.Show
Status.Edit
Status.NotSetup

// Then with a Map, you could do something like this:
const tierStatuses = new Map();
tierStatuses.set(Tiers.First, Status.Show);
tierStatus.set(Tiers.Second, Status.NotSetup);

tierStatus.get(Tiers.First) => Status.Show where Status.Show could be 0 or another numeric value, depending how you declare it. It returns undefined if not set: e.g. tierStatus.get('something') => undefined.

Keep in mind that Maps and Sets are on ES6, so you might need a polyfill or library if you are targeting ES5.

There's also other ways like a custom object or nested array (array of arrays) but that might increase the complexity, not a good trade off vs some extra variables where things are more readable.

edited May 31, 2017 at 21:04

answered May 31, 2017 at 20:03

Juan

6,4633 gold badges32 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

junior_dn Over a year ago

currentTiers = <-- this provides the number of how many tiers are set up, it starts with 1 and than when click the plus sign it goes up to 3 for me as a beginner, what is the advantage of using instead of if/else?

Juan Over a year ago

I understand better what you meant now. You could use a Map or Set, see extended answer for code.

junior_dn Over a year ago

Thanks a lot. However it feels like the Maps and Sets doesn't seem to make the code much simpler or better right? So the solutions I am currently working with would be fine or would you not recommend keeping it the way it is right now?

Juan Over a year ago

Sometimes, we focus too much on writing less code and adding more magic but then maintainability efforts go up when we go re-visit old code. I prefer to keep things simple, if they work, are unit testable, readable (plain English) and they work, I keep them. I personally advice to avoid magic at all costs. We can always go back and refactor and make things better adn re-usable as the code evolves. I would definitively use enums or constants to give meaning to the numeric values, but I think I'd keep the if/else's or switch statements. Really easy to read and know what's going on.

Collectives™ on Stack Overflow

angular2 - make a variable more variable

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related