Angular 2 ngClass not evaluating my expression when checking against condition -

i have expression in angular 2 called selectedstate. expression evaluates 1 of 5 properties inside of const. depending on clicked changes class name.

                    <button                         class="button button--secondary"                         [ngclass]="selectedstate">                         <div class="u-maxx u-centerx">                             <span>button</span>                             </div>                         </div>                     </button> 

"selectedstate" return whichever item clicked; default, is-hovering, is-active, disabled, , loading.

e.g. if click is-hovering return

                    `<button                         class="button button--secondary is-hovering">                         <div class="u-maxx u-centerx">                             <span>button</span>                             </div>                         </div>                     </button>` 

now when change syntax so.

                    <button                         class="button button--primary"                         [ngclass]="{selectedstate: type === 'primary'}">                         <div class="u-maxx u-centerx">                             <span>button</span>                          </div>                     </button> 

now "selectedstate" evaluates string "selectedstate" instead of being dynamic , changing before. how can keep dynamic behavior while checking type === 'primary'? need check type because there several types on page. need each type affect 1 button otherwise affect buttons on page.

you should keep logic out of templates possible, either bind [ngclass]="somevariable" , mutate variable calling functions, or bind [ngclass]="somefunction()" , have function return appropriate class name based on set of conditions.

for example, have button calls setishovering function, , button calls setisactive function etc., define functions:

setisactive() {     this.selectedstate = "isactive"; }  setishovering() {     this.selectedstate = "ishovering"; } 

and define ngclass as:

[ngclass]="selectedstate" 

or, define selectedstate function:

selectedstate() {     if(this.ishoveringstatevariable == true) {          this.selectedstate = "ishovering";     } else if (this.isactivestatevariable == true) {           this.selectedstate = "isactive";     } } 

and define ngclass as:

[ngclass]="selectedstate()" 

obviously replace this.ishoveringstatevariable whatever logic appropriate determining actual current state is.