Friday, 4 November 2016

Two Way binding in Angular2

Two way data binding is the concept which makes the Angular in to the Peek position in front end development for versions 1.x, later for version 2 some of the news are reached to the users that Two way data binding is no more in Angular2, but in stable version of Angular2 we have the Two way Data Binding, Now we see the sample of Two way data binding.

The Syntax for Two way Data binding is    [(ngModel)]="propertyName"



<div class="container">
    <br />

        Height : <input type="text" [(ngModel)]="height">
        Background : <input type="text" [(ngModel)]="background">
        Class : <input type="text" [(ngModel)]="classname">
        <button type="submit" [style.height.px]="height" 
                [style.background]="background" 
                [class]="classname"            
                >Submit</button>
    </div>



In the above code you can see in each input control we are binding the value to a model using ngModel, and the model is bind to the button properties.

This alone doesnt make sense to work the ngModel in the Angular2 Applications. we have to add one more thing i.e adding FormsModule in the main module, then only ngModel will work.


import { FormsModule } from '@angular/forms';





    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { AppLoadComponent } from './app.load.component'
    import { UserRoutingModule } from './Routing/user.routing.module';
  
    @NgModule({
        imports: [BrowserModule,HttpModule,FormsModule,AppRoutingModule],
        exports: [],
        declarations: [AppLoadComponent],
        providers:[],
        bootstrap:[AppLoadComponent]
    })
    export class AppModule { 

    }






From this post you can learn how to do the Two way Data Binding in the Angular2 Applications.











Find the last Row and last column in Excel

In this post we are going to see how to find out the Last Row and Last Column in a Excel sheet. this will be helpful in many situations.



            Dim LastRow As Long
            Dim lastCol As Long
            
            
            lastCol = ProBook.Worksheets(1).Cells(1, Columns.Count).End(xlToLeft).Column
                   
            LastRow = ProBook.Worksheets(1).Cells.Find(What:="*", _
                       After:=ProBook.Worksheets(1).Cells.Range("A1"), _
                       SearchDirection:=xlPrevious, _
                       LookIn:=xlFormulas, _
                       SearchOrder:=xlByRows).Row







From this post you can learn how to find the Last Row and Last column in a Excel sheet

How to enable the Developer Tab in the Excelsheet and enable the Macro

In this post we are going to see how to enable the Developer Tab in the Excelsheet and enable the macro in the Excel for processing the VBA Code.


To Enable the Developr tab , please do the following steps.

1.  Right click any where on the Ribbon and click the Customize the Ribbon, this will launch a window .





2. Click the customize the Ribbon and select the Main tab in the customize the Ribbon option, then check the Developer 
     option.





3. This check option enables the Developer Tab in the Ribbon., we can find the Develop tab next to the View Tab.

4. On the Developer tab click the Insert option, where you can find many activex Controls , which is used to do the           
     programming.







Enable a Macro
***********************

5. Click the Design mode button first , which is present in the developer tab.

6. Click the command button and drag it to the Excel sheet, 







7. Right click on the button and you can see many properties like View code, Edit name of the control, etc.

8. Now click on the View code which will bring the macro code for that button .















9. Type some sample code , for example here we are using the Folder browse code , Here in this sample i am creating a method named Browse and called it from inside the button handler.

10. now close the visual basic editor, and deselect the Design mode, 

11. Now click on the button, you can see the code is executed in Excel sheet, a folder browse dialog will appear in front          of you,













From this post you can learn how to enable a developer option in Excel sheet and enable a macro 

Create a Folder Browse Dialog in Excel using VBA

In this post we are going to see how to create a Folder Browser Dialog in Excel using VBA, normally there is a common object which is used for savefile, select file, open folder separate based on parameters.




Dim folderPath As String


Sub Browse()
  Dim folderdlg As FileDialog
  Set folderdlg = Application.FileDialog(msoFileDialogFolderPicker)
  folderdlg.AllowMultiSelect = True
  folderdlg.Show
  
  If folderdlg.SelectedItems.Count > 0 Then
    folderPath = folderdlg.SelectedItems(1)
  End If
  
End Sub











When click on the Excel Files Folder , it will launch the folder browse dialog.










From the above code you can learn how to browse a folder using VBA in EXCEL

Tuesday, 1 November 2016

Routing concepts in Angular2

In this post we are going to see how to configure the routing in Angular2 applications, in previous versions we are used the ngRoute and UiRouter concepts to configure the Route, it is almost similar to that , but we are using here the Module system to configure the Routes.

import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  { path: 'rating', component: webformComponent },
  { path: 'news',component:NewsComponent},
  { path: '', component:webformComponent },
  { path: '**', component:UnknownComponent }
];


export const routedComponents = [AppComponent, webformComponent,
     NewsComponent,PrintComponent,UnknownComponent];


@NgModule({
  imports : [CommonModule,RouterModule.forRoot(routes)],
  declarations:routedComponents,
  exports: [RouterModule,EditorModule,CommonModule],
})

export class AppRoutingModule { }


From the above code you can see that the RouterModule and Routes are used to configure the Routes.

We have to give the path and component which have to load for that url, here you can see the RouterModule.forRoot is used to load the routes , in overall applications we should have only one root route, others are must be child, because it is defines that is already defines and creates, so we dont need to create again and again, Here you can see the path is given as empty that means default routing, another one you can see is '**' that specifies the path whatever may be other than configured is routed to unknown component., Now this is the root component for Router module which is stored in separate file, so we have to configure or add this to main module, so we are configure the RouterModule to be exports , then only it can be import or can be used in another module.


Now we will define another set of routing which is separate from this , in this sample we are configuring and separating the routes based on module.


  import { NgModule } from '@angular/core';
  import { CommonModule} from '@angular/common'
  import { FormsModule } from '@angular/forms';
  import { Routes, RouterModule } from '@angular/router';
  import { EmployeeComponent,StudentComponent } from './employee.component'
  import { EmployeeDetailComponent } from './employee.detail'
  import { EmployeeDetailGuard } from './employeeDetailGuard';
  import { EmployeeResolver } from './employeeDetailResolve'
  import { EmployeeFilterPipe } from './employeePipe'

  const routes: Routes = [ 
    { path: 'employee',component:EmployeeComponent},
    { path: 'employee/:id',component:EmployeeDetailComponent, 
                canActivate:[EmployeeDetailGuard],
                resolve:{ userinfo:EmployeeResolver }},
    { path: 'student',component:StudentComponent},  
  ];

  export const routedComponents = [EmployeeComponent,StudentComponent,
  EmployeeDetailComponent,EmployeeFilterPipe];

  @NgModule({
    imports : [CommonModule,FormsModule, RouterModule.forChild(routes)],
    declarations:routedComponents,
    providers:[EmployeeDetailGuard,EmployeeResolver],
    exports: [RouterModule,FormsModule],
  })

  export class UserRoutingModule { }


Now we have to import both the module system in the main module which loads the application, in the above sample you can see the route is configure as ForChild, this is because we have to configure the routes as Root for only one time,
Finally we are going to import the both the things in Main module, in the above code you can see the CanActivate and Resolve properties in routes , we will discuss about this things in later posts.

import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
        
    import { FocusedDirective } from './directives/onload.directive';
    import { FocusOnLoadDirective,RgMultilineEllipses } from './directives/onload.directive';
    import { FormComponent } from './Forms/form.component';
    import { BaseRequestOptions, Http, Headers } from '@angular/http';
    import { webformComponent } from './Component/web.component'
    
    import { AppLoadComponent } from './app.load.component'

    
    import { DataService } from './data.service';
    import { AppRoutingModule } from './app.routing.module'
    import { UserRoutingModule } from './user.routing.module';
  
    @NgModule({
        imports: [BrowserModule,HttpModule,UserRoutingModule,AppRoutingModule],
        exports: [],
        declarations: [AppLoadComponent,FormComponent,FocusedDirective,
                 RgMultilineEllipses],
        providers:[DataService],
        bootstrap:[AppLoadComponent]
    })
    export class AppModule { 

    }


In the module you can see that the both the Router module are imported, Main module loads the both the routes because the router module is exported in both modules,Now we will see how to configure the router links and containers


<div>
    <nav class="navbar navbar-fixed-top navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">   
                
                <button type="button" class="navbar-toggle collapsed" 
                      data-toggle="collapse" 
                    data-target="#angular-collapse-menu" 
                    aria-expanded="false">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                                             
                <a class="navbar-brand" href="#">Angular 2</a>
            </div>
            <div class="collapse navbar-collapse" id="angular-collapse-menu">
                <ul class="nav navbar-nav">                    
                        <li>
                            <a [routerLink]="['/employee']">Employees</a>
                        </li>
                        <li>
                            <a [routerLink]="['/student']">Student</a>
                        </li>
                        <li>
                            <a [routerLink]="['/rating']">Rating</a>
                        </li>
                        <li>
                            <a [routerLink]="['/news']">News</a>  
                        </li>
                    </ul>
            </div>
            
        </div>                        
    </nav>    
</div>
<div style="padding-top:65px;">
    <router-outlet></router-outlet>
</div>



that's it everything is configured, [routerLink]="['/news']"  is used to create a router link which will call the path /news and NewsComponent instance is created,  <router-outlet> </router-outlet>  is used to inject the view in the container we will load the applications, Let we see the output.


























From this post you can see how to configure the Routes and RoutesModule for the Angular2 Applications.