In this post we are going to see how to create the component in angular 1.5 using Typescript. first we have to understand what is component, component is a isolated directive with some functionalities, most of functionalities are look like same for directive and components, few things will change, we will see the how to write the components using Typescript
First we have to create the interface for bindings parameters, then implement that in a controller , later assign this controller to component, in component we have bindings parameters there also we have to specify the parameters.
export interface StarBindings {
ratingValue: any;
max: number;
readonly: boolean;
starSize: number;
onRatingChanged: (value: any) => any; }
In component
this.bindings = {
ratingValue: '=',
max: '=',
readonly: '@',
starSize: '=',
onRatingChanged: '&'
};
Then write logic inside the controller, later access everything using the $ctrl, which is automatically created alias by component.
module app.components {
export interface StarBindings {
ratingValue: any;
max: number;
readonly: boolean;
starSize: number;
onRatingChanged: (value: any) => any;
}
class StarController implements StarBindings {
public ratingValue: any;
public max: number;
public readonly: boolean;
public starSize: number;
public onRatingChanged: (value: any) => any;
public stars: any =[];
static $inject = ['$log','$element','$scope'];
constructor(private $log: ng.ILogService, private $element: ng.IAugmentedJQuery,
private $scope: ng.IScope){
}
$postLink = (): void => {
this.$log.info('post link invoked');
this.drawStar();
};
drawStar = (): void => {
this.$element.css('font-size',this.starSize+'px');
this.$scope.ratingValue = 0;
let t = this;
this.$scope.$watch('ratingValue', function (oldval, newval) {
if (newval) {
t.updateStars();
}
});
this.$scope.ratingValue = this.ratingValue;
};
toggle = (index: number) => {
if (this.readonly && this.readonly === true) {
return;
}
this.ratingValue = index + 1;
this.$scope.ratingValue = this.ratingValue;
this.onRatingChanged({ rating: index + 1 });
};
updateStars = (): void => {
this.stars = [];
for (let i:number = 0; i < this.max; i++) {
this.stars.push({ filled: i < this.ratingValue });
}
}
}
class StarComponent {
public bindings: any;
public controller: any;
public template: string;
constructor(){
this.template = '<ul class="rating">' +
'<li ng-repeat="star in $ctrl.stars" ng-class="star"'+
' ng-click="$ctrl.toggle($index)">' +
'\u2605' +
'</li>' +
'</ul>';
this.controller = StarController;
this.bindings = {
ratingValue: '=',
max: '=',
readonly: '@',
starSize: '=',
onRatingChanged: '&'
};
}
}
angular.module('myapp').component('star',new StarComponent());
}
Here you can see that i am using the $postLink method to render the star , $postLink is a predefined method called by component, Assign the template, bindings, controller inside the component, star rendering logic are present inside the controller, i am using the $watch here to render the star in the when user click.
app.controller.ts
/// <reference path="../node_modules/@types/angular/index.d.ts" />
module mymod{
class MyController{
private name: string;
private sample: string;
private title: string;
private rating2: number;
static $inject = ['$log']
constructor(private $log: angular.ILogService){
this.title = "Angular with Typescript";
this.name = 'rajesh1';
this.sample = 'raise';
this.rating2 = 4;
}
save = (rating: any): void => {
console.log('rating changed');
console.log(rating);
};
dosomething = (): void => {
window.setTimeout(3, () => { this.$log.warn('do something'); });
}
}
var myApp= angular.module('myapp',[]);
myApp.controller('mycontroller',MyController);
}
Html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="mycontroller as vm">
<h2 style="margin:20px">{{vm.title}}</h2>
<br/>
<star rating-value="vm.rating2" max="10" star-size="45"
on-rating-changed="vm.save(rating)"></star>
<link href="styles.css" rel="stylesheet" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="app/app.js"></script>
<script src="app/star.component.js"></script>
</body>
</html>
CSS:
.rating {
color: #a9a9a9;
margin: 0;
padding: 0;
}
ul.rating {
display: inline-block;
}
.rating li {
list-style-type: none;
display: inline-block;
padding: 1px;
text-align: center;
font-weight: bold;
cursor: pointer;
}
.rating .filled {
color: red;
}
Output:
From this post you can learn how to create components in angular 1.5 using Typescript
