Wednesday, 5 October 2016

Create a Angular2 Directive, focused directive which will change the focus of an element based on model value

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 directive  which is used to focus an element based on the value of model value, when the model changes the value will be 

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 focused directive, what we are trying to do, we are trying to develop a directive like below. where we can changed the focus based on model value.







so now here we are going to develop the directive.  In the above two images we can see that the focus is changed from username to password.

import { Directive, ElementRef,Renderer,Input,AfterViewInit,
         HostListener,OnChanges,Output,EventEmitter } from '@angular/core';


@Directive({
    selector:'[focused]'    
})

export class FocusedDirective implements OnChanges , AfterViewInit{
    
    private istrigger = false;
    @Input('focused') isFocus:any;   
     @Output() focusedChange = new EventEmitter<any>(); 
    @Output() IsFocusChange = new EventEmitter();
    
    constructor(private ele:ElementRef,private render:Renderer){

    }

    @HostListener('blur',['$event.target'])
    onBlur(ele){      
        this.isFocus = false;  
        this.focusedChange.emit(this.isFocus);         
        this.IsFocusChange.next(this.isFocus);        
        this.istrigger = true;           
    }

    @HostListener('focus',['$event.target'])
    onFocus(ele){     
        if(!this.isFocus){
            this.focusedChange.emit(this.isFocus); 
            this.isFocus = true;  
            this.IsFocusChange.next(this.isFocus);         
        }
    }

    ngOnChanges(changes){
       if(this.isFocus){
            this.ele.nativeElement.focus();
            this.IsFocusChange.next(this.isFocus);
        }
        else{
            if(this.istrigger==false){
                this.ele.nativeElement.blur();
                this.IsFocusChange.next(this.isFocus);
                this.istrigger = true;
            }
            this.istrigger = false;
        }
    }
    
    ngAfterViewInit(){
        if(this.isFocus){
            this.ele.nativeElement.focus();            
        }
        else{
            this.ele.nativeElement.blur();           
        }
    }    

}

from above code you may wonder why this much of code , for a focus element, because we have handle all events changes through UI, Model, when you change the element focus that time also we are have to update the model sync with data

If you want only a update from Model to Directive then use the directive like as [directivename]="modelvalue", 
if you want a update from view to model and model to view in Two way binding then use like below [(directivename)]="modelvalue"

We are going to use above directive in our code , using the button click we are going to change the focus, and the same using mouse click on another element we can change the focus , this also update to model.



Now create a new component where we are going to use this directive name it as form.component,ts

import { Component, ViewEncapsulation } from '@angular/core';
    

    @Component({
        selector:'myform',
        templateUrl:'com/Forms/forms.html'
    })
    export class FormComponent{
        private userfocus:boolean;
        private passfocus:boolean;
        constructor(){
            this.userfocus = true;     
            this.passfocus = false;       
        }

        PasswordFocus(){
            this.userfocus=false;
            this.passfocus = true;            
        }

        UserNameFocus(){
            this.passfocus=false;
            this.userfocus=true;
        }

        focusChanged(value){
            console.log("focus is changed "+value);            
        }
    }



then create a forms.html to bind the template with the component.

<br/>
    <div class="container" style="width:400px">
        User Name : <input   [focused]="userfocus" type="text" 
                             class="form-control" 
                             placeholder="Please enter user name"  /> <br />
        Password  : <input [(focused)]="passfocus" 
                            (IsFocusChange)="focusChanged($event)" 
                            type="password" class="form-control" 
                            placeholder="Please enter password" /> <br/>
        <button type="submit" (click)="PasswordFocus()" 
                class="btn btn-lg btn-success btn-block">Password Focus</button>    
        <button type="submit" (click)="UserNameFocus()" 
                class="btn btn-lg btn-primary btn-block">Username Focus</button>
    </div>





,Now we are going to create a module using that we are bootstrap the component. 


app.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { FocusedDirective } from './directives/onload.directive';
    import { FormComponent } from './Forms/form.component';
    
    


    @NgModule({
        imports: [BrowserModule,FormsModule],
        exports: [],
        declarations: [FormComponent,FocusedDirective],
        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

<body>
    <myform>Loading...</myform>
  </body>





Then now we are going to see the output












from this post you can learn how to create a focused directive which can be change through model property.






No comments:

Post a Comment