In this post we are going to see how to create a component in Angular2 Js, for that we are taking the a valid sample component which are used in real time scenario like star rating component which is used to rate a value in applications
for basic setup and structuring of angular2 application please refer this link https://angular2js.blogspot.in/2016/10/create-basic-structure-and-setup-for.html, After setup the basic structure here we are there to develop a star rating component, what we are trying to do, we are trying to develop a component like below.
Rating control:
***********************
To do this first we have to create a component and then module , finally we have to import that module that't it
Steps to do:
*****************************************
1. Create a folder name editors under the com folder
2. Create a file named star.ts
3. Create a file named ratingcontrol.ts
4. Create a file named ratingcontrol.html
5. Create a file named editor.module.ts
6. Import this module
7. add the Star Component in the App.component
7. Bootstrap the App.Module
Star.ts
From this Code you may see what we are trying to do, we are creating a model for star component, based on which we are controlling the star rating component
ratingcontrol.ts
From this code you can see the full implementation of star rating component, where are trying to build a component like below, here we are declaring component in three kind of formats with simple implementation , in one tag we are passing value directly to the property, in another thing we are passing value to the control with the models,
if you want to pass a value directly then pass it like color="red"
if you want to pass a value from model then pass it like [color]="color"
if you want to pass a model with two way then [(color)] ="color"
The star component have the following properties
ratingvalue : This is the actual value which represents the value of rating,This can acts as one-way and well as Two way
max : This is the number representation of total number of stars to draw
color : This is the color of the Outline of the star
readonly: This property makes the component readonly, i.e user cant give rating, but in code you can change it
fillcolor : This property is the color of the star, if you doesnt give this then gold is default color
OnRatingChanged : This is the callback event which can trigger when rating is changed ,this can be hooked in your applications , to get the notify when changes
ratingcontrol.html
From this you can see that the implementation of star component. create this html file and link it with component
editor.module.ts
From this code , you can see that the implementation of module for our star rating component
app.component.ts
After creating the module , we have to create a root component in which we are adding the star component,In this component we can see the implementation of star component in three different ways
app.module.ts
From this code you can see the root component is bootstrapped and dependencies are injected
main.ts
Here we are bootstrapping the Appmodule
index.html
Here in the index.html file we can see the my-app tag, which will trigger the app.component
Output:
************************
From this post you can learn how to create a star rating component using Angular 2 and Typescript, and also you can learn how to inject that component in to the root module.
for basic setup and structuring of angular2 application please refer this link https://angular2js.blogspot.in/2016/10/create-basic-structure-and-setup-for.html, After setup the basic structure here we are there to develop a star rating component, what we are trying to do, we are trying to develop a component like below.
***********************
To do this first we have to create a component and then module , finally we have to import that module that't it
Steps to do:
*****************************************
1. Create a folder name editors under the com folder
2. Create a file named star.ts
3. Create a file named ratingcontrol.ts
4. Create a file named ratingcontrol.html
5. Create a file named editor.module.ts
6. Import this module
7. add the Star Component in the App.component
7. Bootstrap the App.Module
Star.ts
From this Code you may see what we are trying to do, we are creating a model for star component, based on which we are controlling the star rating component
export class star { public filled:boolean; }
ratingcontrol.ts
From this code you can see the full implementation of star rating component, where are trying to build a component like below, here we are declaring component in three kind of formats with simple implementation , in one tag we are passing value directly to the property, in another thing we are passing value to the control with the models,
if you want to pass a value directly then pass it like color="red"
if you want to pass a value from model then pass it like [color]="color"
if you want to pass a model with two way then [(color)] ="color"
The star component have the following properties
ratingvalue : This is the actual value which represents the value of rating,This can acts as one-way and well as Two way
max : This is the number representation of total number of stars to draw
color : This is the color of the Outline of the star
readonly: This property makes the component readonly, i.e user cant give rating, but in code you can change it
fillcolor : This property is the color of the star, if you doesnt give this then gold is default color
OnRatingChanged : This is the callback event which can trigger when rating is changed ,this can be hooked in your applications , to get the notify when changes
<star-rating [(ratingvalue)]="rating" [max]="max" [color]="starcolor" [readonly]="readonly" [fillcolor]="fillcolor" (OnRatingChanged)="ratingChanged($event)" > </star-rating>
<star-rating ratingvalue="4" max="10" color="gray" fillcolor="orange" readonly="false" (OnRatingChanged)="ratingChanged($event)" > </star-rating><star-rating ratingvalue="2" max="5" color="green" fillcolor="green"> </star-rating>
import { Component,ViewEncapsulation,Input,Output, EventEmitter,ElementRef,OnInit,OnChanges, DoCheck,Renderer,AfterViewInit,AfterViewChecked, AfterContentInit,ViewChildren,ContentChildren, ChangeDetectionStrategy, HostBinding } from '@angular/core'; import { star } from './star'; @Component({ selector:'star-rating', changeDetection:ChangeDetectionStrategy.OnPush, templateUrl:'com/editors/ratingcontrol.html', styles:[` .rating { unicode-bidi: bidi-override; text-align: start; display:inline-block; direction:rtl; } .star{ color: gold; } .rating > span { display: inline-block; position: relative; width: 0.9em; font-size:30px; } .rating:hover{ cursor:pointer; } .rating > span:hover, .rating > span:hover ~ span { color: transparent; } .rating > span:hover:before, .rating > span:hover ~ span:before { content: "\\2605"; position: absolute; left: 0; color: gold; } `], host:{ } }) export class StarRatingComponent implements OnInit , OnChanges, AfterViewInit, AfterContentInit, AfterViewChecked { @Input() ratingvalue:number; @Output() ratingvalueChange:EventEmitter<number> = new EventEmitter<number>(); @Output() OnRatingChanged = new EventEmitter(); @Input() max:number; @Input() readonly:boolean; @Input() starsize:number; @Input() color:string; @Input() fillcolor:string; @Output() OnMouseOver = new EventEmitter(); @ViewChildren('starfilled') starChildren; public stars:star[]; private ele:ElementRef; private render:Renderer; private changeElements:HTMLElement[] constructor(e1:ElementRef,render:Renderer){ this.ele = e1; this.render = render; this.fillcolor = "gold"; } public ngOnInit(){ } public ngOnChanges(){ if(this.readonly==undefined){ this.readonly = false; } if(typeof(this.readonly)=="string"){ this.readonly = (String(this.readonly)=="true"); } this.updateStars(); } public ngAfterViewInit(){ this.starChildren.changes.subscribe(changes=> { this.changeElements = changes._results.map( (eleref)=> eleref.nativeElement ); this.OnRatingChanged.next( { ratingvalue:this.ratingvalue, max:this.max, Changedelements:this.changeElements }); }); } public OnMouseenter(evt){ this.OnMouseOver.next(evt); } public ngAfterViewChecked(){ } public ngAfterContentInit(){ } private updateStars(){ this.stars = []; var j = this.max - this.ratingvalue; for (var i = 1; i <= this.max; i++) { this.stars.push({ filled: i > j }); } this.render.setElementStyle(this.ele.nativeElement,'color',this.color); } private toggle(index){ if(this.readonly===false){ this.ratingvalue = (this.max - index); this.updateStars(); this.ratingvalueChange.emit(this.ratingvalue); } } }
ratingcontrol.html
From this you can see that the implementation of star component. create this html file and link it with component
<div class="rating"> <span *ngFor="let star of stars; let i=index" [class.star]="star.filled" (click)="toggle(i)"> <span #starfilled (mouseenter)="OnMouseenter($event)" [style.color]="fillcolor" *ngIf="star.filled"> ★ </span> <span (mouseenter)="OnMouseenter($event)" *ngIf="!star.filled"> ☆ </span> </span> </div>
editor.module.ts
From this code , you can see that the implementation of module for our star rating component
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { StarRatingComponent } from './ratingcontrol'; @NgModule({ imports:[CommonModule], declarations:[StarRatingComponent], providers:[], exports:[StarRatingComponent] }) export class EditorModule{ }
app.component.ts
After creating the module , we have to create a root component in which we are adding the star component,In this component we can see the implementation of star component in three different ways
import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector:'my-app', template:` <span style="font-size:18px;">Rajesh G an Architect :</span> <star-rating ratingvalue="4" max="10" color="gray" fillcolor="orange" readonly="false" (OnRatingChanged)="ratingChanged($event)" > </star-rating> <br/> <span style="font-size:18px;">Tamil Movie rate it :</span> <star-rating [(ratingvalue)]="rating" [max]="max" [color]="starcolor" [readonly]="readonly" [fillcolor]="fillcolor" (OnRatingChanged)="ratingChanged($event)" > </star-rating> <br/> <span style="font-size:18px;">Indian Cricket Team :</span> <star-rating [(ratingvalue)]="rating2" max="5" color="blue" fillcolor="blue"> </star-rating> <br/> <span style="font-size:18px;">Microsoft Bug :</span> <star-rating ratingvalue="2" max="5" color="green" fillcolor="green"> </star-rating> <div> <button type="button" class="btn btn-sm btn-success" (click)="PrintValue()"> Print Values </button> </div> `, encapsulation:ViewEncapsulation.None , styles:[] , }) export class AppComponent{ rating = 3; rating2 = 2; max = 5; starcolor="red"; readonly = false; fillcolor="red"; ratingChanged(value){ console.log("OnRating change Callback"); console.log(this.rating); console.log(value); console.log(""); } PrintValue(){ console.log("Values of Ratings"); console.log("Rating :" + this.rating); console.log("Rating1 :"+this.rating2); console.log(""); } }
app.module.ts
From this code you can see the root component is bootstrapped and dependencies are injected
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { EditorModule } from './editors/editor.module'; import { AppComponent } from './app.component'; @NgModule({ imports: [BrowserModule,FormsModule,EditorModule], exports: [], declarations: [AppComponent], bootstrap:[AppComponent] }) export class AppModule { }
main.ts
Here we are bootstrapping the Appmodule
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; import { HelloModule } from './hello.module' const platform = platformBrowserDynamic(); let moduleref = platform.bootstrapModule(AppModule);
index.html
Here in the index.html file we can see the my-app tag, which will trigger the app.component
<html> <head> <title>Angular QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="style.css"> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="lib/jquery.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script> <!-- 2. Configure SystemJS --> <script src="systemjs.config.js"></script> <script> System.import('com').catch(function(err){ console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
Output:
************************
Output of a callback function where we are printing the values of rating control , when rating changes, in this function we can notice that the model also updated when we change the value, this is because of two way binding
Callback console print values when value changes in the star rating component
From this post you can learn how to create a star rating component using Angular 2 and Typescript, and also you can learn how to inject that component in to the root module.
No comments:
Post a Comment