I want to create an AngularJS component called messageDisplay. This component should be able to accept a property named message, which will be provided directly in the HTML tag of the index.html file, and then display that message. Despite following various examples, I'm unable to get it to work as expected.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Angular sandbox</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="app.js"></script>
<script src="components/message-display.component.js"></script>
</head>
<body ng-app="app">
<message-display message="Hello"></message-display>
</body>
</html>
app.js
const app = angular.module("app", []);
message-display.component.js
app.component(
"messageDisplay",
{
bindings: {
message: "<"
},
template: "<h1>Message: {{$ctrl.message}}</h1>"
}
)
When I try this setup, all I see on the page is "Message:" without the actual content. I was expecting to see "Message: Hello".