Using Angular2 Services

Remember we created flot component in previous posts?
Lets have a quick look on the code now:

export class App {  
  constructor() {
    ...
    //Look here - dont you feel something here is uuuugggglllyyyy?
    this.dataset = [{label: "line1",color:"blue",data:[
    [1, 130],
    [2, 40],
    [3, 80],
    [4, 160],
    [5, 159],
    [6, 370],
    [7, 330],
    [8, 350],
    [9, 370],
    [10, 400],
    [11, 330],
    [12, 350]
]}];
  }
}

The way dataset property sat - is perfect example of hardcoding, and everybody knows that hardcoding is bad.
Since we dont have real server to get data from yet, at least lets move the data-getting logic to some different module, in other words -

Lets Create A Service

export var FlotEntries: Array[] = [
    [1, 130],
    [2, 40],
    [3, 80],
    [4, 160],
    [5, 159],
    [6, 370],
    [7, 330],
    [8, 350],
    [9, 370],
    [10, 400],
    [11, 330],
    [12, 350]
];

//@Injectable()
export class FlotService {
  getFlotEntries() {
    return FlotEntries;
  }
}

This service doing only one thing - getting data for a plot chart.

Lets Use Our Service

Last thing that left - is to teach our main component how to use the service:
Note: Dont forget to list the service inside "poviders" property

//our root app component
import {Component} from 'angular2/core'
import {FlotCmp} from './flot';
import {FlotService} from './FlotService';

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <flot  [options]="splineOptions" [dataset]="dataset" height="250px" width="100%"></flot>
    </div>
  `,
  directives: [FlotCmp],
  providers: [FlotService]//important!!!
})
export class App {
  
  constructor(private _flotService:FlotService) {
    this.name = 'Angular2'
    this.splineOptions: any = {
            series: {
                lines: { show: true },
                points: {
                    radius: 3,
                    show: true
                }
            }
    };
    this.dataset = [{label: "line1",color:"blue",data:this._flotService.getFlotEntries()]}];
  }
}

Looks better isn't it?
plunkr
Thats it, now you know how to create angular2 service.
Hope you have fun reading

bootstrap collapsible directive in angular2

I decided to to take another looking easy challenge - to make collapsible directive with angular2 by myself.
I will use css of great bootstrap framework.
Bootstrap framework has collapsed CSS class for make elements disappear (by applying "display:none" style), and "in" class, which when it set on collapsed element - makes it to show up.
So, once we already know (after doing couple of things in previous posts) how to create some angular2 components -

Lets create parent component (App)

//our root app component
import {Component} from 'angular2/core'
import {Collapse} from 'src/collapse'
@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2 (click)="isCollapsed = !isCollapsed">click here</h2>
       
      <div class="collapse in" [collapse]="isCollapsed" >
        <div class="well">
          panel panel panel
        </div>
      </div>
      
    </div>
  `,
  directives: [Collapse]
})
export class App {
  isCollapsed:boolean = false;
  constructor() {}
} 

Directive is not dead

Yes there are directives in angular2 too. Their goal is to be decorator-style directives, which do not have templates. According to angular2 documentation "directive changes the appearance or behavior of a DOM element."
Note that for changing class property of directive's root element i go to use HostBinding factory

import {Directive, Input, HostBinding} from 'angular2/core'
@Directive({selector: '[collapse]'})
export class Collapse { 
 

  @HostBinding('class.in') 
  private isCollapsed:boolean;
  
  
  @Input()
  private set collapse(value:boolean) { 
     
      if(!value){   
        this.isCollapsed = true; 
      }else { 
        this.isCollapsed = false; 
      }
     
  }
  constructor() {}  
}

Animation

Everybody knows that collapse is not looking cool without animation.
Everyone who little familiar with css, knows that for make animation you may use CSS3 Transitions.
For example:

.collapsing{
 height:80px; 
 overflow:hidden;
 transition:height 0.4s ease-in-out;
}

After applying this class on some element, its height will smoothly change to 80 pixels.

Trick

Animation will not work for elements those height is not specified (auto). So, for make some html elements to collapse with animation we must give them their own initial css height. One of the ways to measure the actual height of the element - is to use scrollHeight property.

    this.h = elem.scrollHeight;   

Lets use the trick on our the directive

import {Directive, Input, HostBinding, ElementRef} from 'angular2/core'
@Directive({selector: '[collapse]'})
export class Collapse { 

  @HostBinding('class.collapsing') 
  private isCollapsing:boolean   

    // style
  @HostBinding('style.height') 
  private height:string;
  
  
  @Input()
  private set collapse(value:boolean) { 
    if(value!==undefined){
      if(value){ 
        this.hide(); 
      }else { 
        this.show();
      }
    }
    //
  }
  constructor(public el: ElementRef) {
    
    this.measureHeight(); 
  }  
  measureHeight() {
    let elem = this.el.nativeElement;
    //lets be sure the element has display:block style
    elem.className = elem.className.replace('collapse', '');
    this.h = elem.scrollHeight;
   
  }
  hide(){
    this.height = this.h +'px'
    setTimeout(() => {
        this.height = '0px';
        this.isCollapsing = true;//apply 'collapsing' class
    },1); 
  }
  show() {
    this.height = '0px'
    setTimeout(() => {
        this.height = this.h + 'px';
        this.isCollapsing = true;//apply 'collapsing' class
    },1);
  }  
}

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