Deepshikha Khadgi Deepshikha Khadgi -3 years ago 116
AngularJS Question

Does AngularJS component pattern bindings has specific naming format?

I am learning component pattern in angularJS. I am trying to use bindings in component pattern. The binding name I have used is firstName . But the problem is it is not binding. When I replaced firstName with anything else like abc it works fine. Can anyone say what may have caused that problem?

The component code is as follow:

(function () {
angular.module('mainModule').component('heroList', {
template: '<p>Hello from component {{$ctrl.firstName}}</p>',
//controller: 'HeroListController',
bindings: {
firstName: '='


The index.html and index.js that calls this component is:

(function () {
var app= angular.module('mainModule', []);

app.controller('myCtrl', function () {
var vm = this;
vm.firstName = "John";
vm.lastName = "Doe";


<!DOCTYPE html>
<title>Angular Components</title>
<script src="scripts/angular.min.js"></script>
<script src="index.js"></script>
<script src="heroes/hero-list.component.js"></script>
<script src="heroes/hero-list.controller.js"></script>

<body ng-app="mainModule" ng-controller="myCtrl as vm">

{{vm.firstName}} {{vm.lastName}}

<hero-list firstName="vm.firstName"><hero-list>


The output I get is:

> John Doe
>Hello from component

But after I replace firstName with abc I get the desired output.

>John Doe
>Hello from component John

Could anyone help me with what may have caused this problem?

Answer Source

Bindings use the same camelCase notation as Component Names e.g. they are separated using dashes. So to use firstName binding, you use it as:

<hero-list first-name="vm.firstName"><hero-list>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download