Use a TypeScript enum as an Angular template variable name with ngTemplateOutlet -

i have looked @ questions this one. doesn't quite answer question. i want bind local variable name enum's value in following (heavily simplified) example:

in certain-state.component.ts:

export enum certainstate {     valid,     invalid }  export class certainstatecomponent {     // holder current state     public state: certainstate;      // store actual enum in instance of class     // available in template     public certainstates: typeof certainstate = certainstate;      // below logic sets state     ... } 

in certain-state.component.html:

<ng-container *ngtemplateoutlet="state_{{state}}"></ng-container>  // invalid syntax want demonstrate intention <ng-template #state_{{certainstates.valid}}><span>valid</span></ng-template> <ng-template #state_{{certainstates.invalid}}><span>invalid</span></ng-template> 

edit: think solution in following answer: how use typescript enum value in angular2 ngswitch statement. guys think?

this certainstate enum is:

(function (certainstate) {     certainstate[certainstate["valid"] = 0] = "valid";     certainstate[certainstate["invalid"] = 1] = "invalid"; })(certainstate = exports.certainstate || (exports.certainstate = {})); 

it maps keys indexes , vice versa.

so should typed like:

public state: number; public certainstates: typeof certainstate = certainstate; 

and if state name supposed used, can looked on enum:

<ng-container *ngtemplateoutlet="state_{{certainstates[state]}}"></ng-container> <ng-template #state_{{certainstates[certainstates.valid]}}><span>valid</span></ng-template> 

or enum index can used directly:

<ng-container *ngtemplateoutlet="state_{{state}}"></ng-container> <ng-template #state_{{certainstates.valid}}><span>valid</span></ng-template> 

enums aren't best choice cases key may used string, because require lookup , don't allow strict typing. explained here, plain object better choice looser typing, , namespace stricter typing.