ChangeDetectionStrategy

Many js frameworks have way to watch changes on the javascript models and project them to the html.
In angular 1. this done by digest cycle.
In Angular2 this done by using zone.js
ChangeDetectionStrategy is how angular2 tracking run time changes of the model and projecting them to the DOM.
To be more precisely: framework will check components only when their inputs change or components' templates emit events.

example (or usecase)

Say we need to create upper menu component. In case that user not logged in it should display "login" link, and once somebody logged in - "logout" link should be displayed.

    <li><a [routerLink]="['/Login']" *ngIf="!(getLoggedIn() | async)">Login</a></li>
    <li><a href="#" (click)="logout()" *ngIf="getLoggedIn() | async">Logout</a></li>

So far things are pretty simple only inner model of component changes, and it is changes after request observable fires an event.

  changeDetection: ChangeDetectionStrategy.OnPush

That is good practice to tell angular not to track any other changes on the model since there could not be changes This way angular will work much quicker.

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';

import template from './menu.template.html';
import { UserService } from '../../../auth';

@Component({
  selector: 'top-menu',
  template: template,
  directives: [ROUTER_DIRECTIVES],
  changeDetection: ChangeDetectionStrategy.OnPush
})
...

Form Validation In Angular2

Hi, My today's challenge is to create simple login form, like you can see in almost every web application.
Well, we will use plunker project already created for previous post since it has view called "login". Lets also add css styles of bootstrap library to the project for take advantage of this awesome framework with its form and validtaion styles.

Step 1 - ngModel

Yes, the famous two way data binding is still here. Only now it is using "[(" syntax:

   <form (ngSubmit)="login()">
      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control"
          [(ngModel)]="email"
            >
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control"
          [(ngModel)]="password"
           >
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
  </form>

lets put simple code of component which only checks the input value is bound correctly:

export class Login {
  public  email: string;
  public  password: string;
  constructor(public router: Router){}
  login(){
    if(this.email && this.password){
       alert(this.email+' '+this.password)
    }
  }
}

Now when some characters filled into both inputs you can see it in alert after clicking submit.

Step 2 - ngForm

It is good practice to use "ngForm" directive which holds the status of form and its controls: The status can be valid (or "invalid"),pristine(or dirty) and touched
By using reference (attribute decorated with "#") and "hidden" directive i can show validation error labels.

 <div class="container">
   
   <form (ngSubmit)="login()">
      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control"  required
          [(ngModel)]="email"   ngControl="emailctrl" #emailctrl="ngForm"
            >
        <div [hidden]="emailctrl.valid || emailctrl.pristine" class="alert alert-danger">
          Email is required
        </div>
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control"  required
          [(ngModel)]="password"  ngControl="passctrl" #passctrl="ngForm"
           >
        <div [hidden]="passctrl.valid || passctrl.pristine" class="alert alert-danger">
          Passwd is required
        </div>           
      </div>

      <button type="submit" class="btn btn-default">Submit</button>
  </form>
  </div>

From now - if you typing something in one of the controls and then deleting it - the validation messages displayed.

Here is running code: Hope you have fun reading...

Creating Preloader In Angular2 app

Current Challenge

Many sites and webapps have some cool animation that plays before all the site resources (like css, scripts and other stuff) fully loaded.
You see this cool animation (or progress bar) playing for some time and then all the site elements appear.(Instead of staring in some blank page)

In this post i decided to find out how to create such animation in my angular2 experimental site.

Preloader animations

First of all - for making some animation you must create a proper CSS code. Since i have no time and talent to make this CSS by myself, i made a shortcut and used this cool css preloaders site for taking CSS of one of its awesome animations.

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

HTML element

To make this animation to work we need to put its "spinner" class on some html element that will appear on the view before main application component loaded and will disappear immediately afterwise.
To achieve this effect we can put this element inside the main component tag, so after its contents will load - the inner element will be simply overriden

    <my-app>
      <div class="spinner"></div>
    </my-app>

Thats it - we achieved our goal without writing even single angular2 line! It little bit disappointing but it also good practice to do things as simple as possible

Here is running code: Hope you have fun reading...