Sunday 2 October 2016

Create a sample directive focus-on-load in Angular2 , which will focus the element on load

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

  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 of an focused element

  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