Attribute directives

• Attribute Directives are used to change the behavior, appearance or look of an element on a user input or via data from the service. Essentially, there are three types of directives in Angular 2:

1. Component
2. Structural directives
3. Attribute directives

import {Directive,ElementRef,Renderer} from '@angular/core';

@Directive({
    selector:'[chcolor]'
})
export class ChangeColorDirective{   

    constructor(private el:ElementRef,private render:Renderer){
        
        this.changecolor("red");
    }

    private changecolor(color: string) {

        this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

Example with ElementRef

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

@Directive({
    selector:'[chcolor]'
})
export class ChangeColorDirective{   

    constructor(private el:ElementRef,private render:Renderer){
        
       
    }

    @HostListener('mouseenter') methodToHandleMouseEnterAction(){
        this.changecolor('red');
    }
    
    @HostListener('mouseleave') methodToHandleMouseExitAction(){
        this.changecolor('blue');
    }

    private changecolor(color: string) {

        this.render.setElementStyle(this.el.nativeElement, 'color', color);
    }
}

Example with @HostListener

import {Directive,ElementRef,Renderer,HostBinding,Input} from '@angular/core';

@Directive({
    selector:'[uri]'
})
export class ChangeColorDirective{   

    constructor(){
        
       
    }

    @HostBinding('src')src;

    ngOnInit(){
      this.src = 'https://www.infragistics.com/media/441501/horz_logo.png'
    }
    

}

Example with @HostBinding

Dependency injection

Dependency Injection is a design pattern that passes an object as dependencies in different components across the application. It creates a new instance of class along with its required dependencies. The Dependency Injection is stimulated into the framework and can be used everywhere.

You must remember the below points while using Dependency Injection:

• The injector mechanism maintains service instance and can be created using a provider.

• The provider is a way of creating a service.

• You can register the providers along with injectors.

SERVICES are the main use-case on the dependency injection

Single reusable data service and inject it into the components that need it. Using a separate service keeps components lean and focused on supporting the view, and makes it easy to unit-test components with a mock service.

The @Injectable() decorator tells TypeScript to emit metadata about the service. The metadata specifies that Angular may need to inject other dependencies into this service.

import { Injectable } from '@angular/core';

@Injectable()
export class HeroService {
}

@NgModule({
    declarations: [
    ],
    imports: [
  
        BrowserModule,
        FormsModule,
        HttpModule,
  
    ],
    providers: [
        HeroService,
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

CUSTOM PIPES

A pipe takes in data as input and transforms it to a desired output.

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Example:
 *   {{ 'item' |  myUppercase}}
 *   formats to: ITEM
*/
@Pipe({name: 'myUppercase'})
export class myUppercase implements PipeTransform {
  transform(someString: string): string {
        return someString.toUpperCase()
  }
}

Using parameters

import { Pipe, PipeTransform } from '@angular/core';
/*
 * Example:
 *   {{ 'item' |  myUppercase:'something'}}
 *   formats to: ITEMSOMETHING
*/
@Pipe({name: 'myUppercase'})
export class myUppercase implements PipeTransform {
  transform(someString: string, appendix: string): string {
        return (someString + appendix).toUpperCase()
  }
}

CHANGE DETECTION

The basic task of change detection is to take the internal state of a program and make it somehow visible to the user interface. This state can be any kind of objects, arrays, primitives, … just any kind of JavaScript data structures.

Change detection triggers

• Events - click, submit, …
• XHR - Fetching data from a remote server
• Timers - setTimeout(), setInterval()

ZoneJS - Execution context (revise)