In this post we are going to see how to create a directive in Angular2 Js, for that we are taking a valid sample which are used in real time scenario like focus on load directive which is used to focus an element on page load
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 focus-on-load directive, what we are trying to do, we are trying to develop a directive like below.
Directive :
Here we are going to create a directive which is used to focus an element on page load or element load, the directive will be like focus-on-load in naming
Component :
To add the directive we are creating an form component which is used to create a login form, in which we are adding this directive in the user name text, on loading the form the username textbox is focused.
Create a component name form.component.ts
forms.html
Create a html named forms.html under the folder com/forms/forms.html
Module:
Add the component in the Module and bootstrap the component, finally add the code in the index.html
app.module.ts
main.ts
index.html
Output:
*******************
Here in this code we are enabling an parameter passing like below, passing a red color to the focus-on-load directive which changes the border color of the element in which focused is directive.placed
Sample code to change the border color:
Then output will be like below user name text border color changes to red color
From this post you can see how to create an directive in the Angular2 Framework., This directive can focus the element on the element load.
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 focus-on-load directive, what we are trying to do, we are trying to develop a directive like below.
Directive :
Here we are going to create a directive which is used to focus an element on page load or element load, the directive will be like focus-on-load in naming
import { Directive, ElementRef,Renderer,Input,AfterViewInit } from '@angular/core'; @Directive({ selector:'[focus-on-load]' }) export class FocusOnLoadDirective implements AfterViewInit{ @Input('focus-on-load') Color:string; constructor(private ele:ElementRef,private render:Renderer){ this.ele.nativeElement.focus(); } ngAfterViewInit(){ if(this.Color) this.render.setElementStyle(this.ele.nativeElement,'border','1px solid '+this.Color); } }
Component :
To add the directive we are creating an form component which is used to create a login form, in which we are adding this directive in the user name text, on loading the form the username textbox is focused.
Create a component name form.component.ts
import { Component, ViewEncapsulation } from '@angular/core'; @Component({ selector:'myform', templateUrl:'com/Forms/forms.html' }) export class FormComponent{ constructor(){ } }
forms.html
Create a html named forms.html under the folder com/forms/forms.html
<br/> <div class="container" style="width:400px"> User Name : <input focus-on-load type="text"
class="form-control" placeholder="Please enter user name" /> <br /> Password : <input type="password" class="form-control" placeholder="Please enter password" /> <br/> <button type="submit" class="btn btn-lg btn-success btn-block">Login</button> <button type="submit" class="btn btn-lg btn-primary btn-block">Cancel</button> </div>
Module:
Add the component in the Module and bootstrap the component, finally add the code in the index.html
app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { FocusOnLoadDirective } from './directives/onload.directive'; import { FormComponent } from './Forms/form.component'; @NgModule({ imports: [BrowserModule,FormsModule], exports: [], declarations: [FormComponent,FocusOnLoadDirective], bootstrap:[FormComponent] }) export class AppModule { }
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); let moduleref = platform.bootstrapModule(AppModule)
index.html
<html> <head> <title>Angular QuickStart</title> <meta charset="UTF-8"> <base href="http://localhost:3000/" target=""> <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> <myform>Loading...</myform> </body> </html>
Output:
*******************
Here in this code we are enabling an parameter passing like below, passing a red color to the focus-on-load directive which changes the border color of the element in which focused is directive.placed
Sample code to change the border color:
User Name : <input focus-on-load="red" type="text"
class="form-control" placeholder="Please enter user name" /> <br />
Then output will be like below user name text border color changes to red color
From this post you can see how to create an directive in the Angular2 Framework., This directive can focus the element on the element load.
No comments:
Post a Comment