JavaScript can change HTML content like this:
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>
jQuery can change HTML content like this:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#demo").html("Hello JQuery!");
});
});
</script>
</head>
<body>
<p id="demo">JQuery can change HTML content.</p>
<button type="button" >Click Me!</button>
AngularJS can change HTML content like this:
<div ng-app="myApp" ng-controller="myCtrl">
<p id="demo">{{content}}</p>
<button type="button" ng-click=changeHtmlContent()>Click Me!</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.content="AngularJs can change HTML content."
$scope.changeHtmlContent = function() {
$scope.content = "Hello Angular Js!";
};
});
</script>
I want to do the same thing using the Angular component. But it is not working.
@Component({
selector: 'my-app',
template: `
<p id="demo">{{content}}</p>
<button type="button" ng-click=changeHtmlContent()>Click Me!</button>
`,
})
export class App {
content:string="Angular2 can change HTML content";
constructor() {}
//this data may come from api
changeHtmlContent(){
this.content ="Hello Angular2 !"
}
}
