CODEWITHSUNDEEP
angulartypescript
lapots
lapots

Reputation: 13395

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?

Upvotes: 4

Views: 2218

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657338

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.

Upvotes: 6

Related Questions