user1432980 user1432980 - 11 days ago 5
TypeScript Question

access constant from template

I have a simple component

player-card.component.ts


export const CONTENT_CARD_META = {
"rank": "Rank",
"age": "Age",
"gender": "Gender",
"race": "Race"
};

export const CONTENT_CARD_META_KEYS = [ "rank", "age", "gender", "race" ];

@Component({
moduleId: module.id,
selector: 'player-card',
templateUrl: 'player-card.component.html'
})
export class PlayerCardComponent {
player: Player = {
id: '1',
rank: 'C',
age: 10,
gender: 'male',
race: 'human'
};
}


And template for it

<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="playerCard-tab"
data-toggle="tab" href="#playerCard" role="tab" aria-expanded="true" aria-controls="playerCard">Guild card</a>
</li>
<li class="nav-item">
<a class="nav-link" id="magicCard-tab" data-toggle="tab" href="#">Magic card</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="playerCard" role="tabpanel" aria-labelledby="playerCard-tab">
<div class="card">
<div class="card-block">
<h4 class="card-title text-muted">{{player.name}}</h4>
<h6 class="card-subtitle text-muted">
Adventurer card
</h6>
</div>
<img data-src="holder.js/200px200/?text=Image">
<div class="card-block">
<div class="form-group row" *ngFor="let key of CONTENT_CARD_META_KEYS">
<player-record [label]="CONTENT_CARD_META[key]" [value]="player[key]"></player-record>
</div>
</div>
</div>
</div>
</div>


When I do like this

<div class="form-group row" *ngFor="let key of CONTENT_CARD_META_KEYS">
<player-record [label]="CONTENT_CARD_META[key]" [value]="player[key]"></player-record>
</div>


It does not work.But when I create fields in
PlayerCardComponent


export class PlayerCardComponent {
cartContent = CONTENT_CARD_META;
keyCartContent = CONTENT_CARD_META_KEYS;


And do like this

<div class="form-group row" *ngFor="let key of keyCartContent">
<player-record [label]="cartContent[key]" [value]="player[key]"></player-record>
</div>


It works fine.
How to use
const
variables inside component template?

Answer

In the template is only available what the current component class instance provides.

If you want to access anything outside the component instance, you need some reference inside the component instance that allows to reach out.

There is no way around.

Comments