AngularJS: Use variable inside component

Question

I want to use an input variable and display it inside my component HTML but I can't get it to work.

I'm pretty sure I miss something important here but can't say what.

Here is my component declaration:

app.component('requestSummary', {
    templateUrl: "./Template/request-summary",
    controller: function RequestSummary() {
        var vm = this;
    },
    bindings: {
        request: "="
    }
});

The component template:

<div>
    <h1>{{ vm.request.Pnr }}</h1>
</div>

(I have also tried without the vm)

The component use:

<md-card ng-repeat="request in vm.requests">
    <md-card-content>
        <request-summary request="request"></request-summary>
    </md-card-content>
</md-card>

When I do a console.log(vm) inside the component controller, I can see my request is there:

But I don't know how to print it inside the HTML.

Any help is appreciated.

Lex · Accepted Answer · 2018-06-22 14:56:04Z

1

Components have an automatic default controllerAs controller with an alias of $ctrl. You need to use:

<div>
    <h1>{{ $ctrl.request.Pnr }}</h1>
</div>

And you can get rid of the var vm = this;.

answered Jun 22, 2018 at 14:56

Lex

7,2732 gold badges31 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

AngularJS: Use variable inside component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related