Angular 2 Beginner Notes

angular2Beginner.js

//html
//add the root component html tag specified in the @component mixin under selector
<app></app>

// 
//Basic Requirements to start an angular2 app

//entry point of the app: root component
import {Component} from "@angular/core";
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic"
import {BrowserModule} from "@angular/platform-browser"

@Component({
  selector: 'app',
  template: `<search-box placeholder="Custom Placeholder"></search-box>`
  // define placeholder to pass input data to a component
})

export class App {
}

//initialize the root module in angular 2

//specify the entry point component to the app
@NgModule({
  declarations: [App, SearchBox],
  //add any non-root components to be display in the browser -camelcase
  imports: [BrowserModule],
  bootstrap: [App]
})

export class AppModule {
  
}
platformBrowserDynamic().bootstrapModule(AppModule);

// 
//add a new non-root component

import {Component, Input} from "@angular/core";

@Component({
  selector: 'search-box',
  //css tag - using dash instead of camelCase
  template: `<input placeholder={{text}} #input> 
             <button class="btn-clear" (click)="clear(input)">Clear</button>`
  //or use an external template
  templateUrl: 'search-box.component.html',
  styles: [`
    .btn-clear {
      background: #DE363F;
      color: white;
      font-weight: bold;
      border-radius: 4px;
    }
  `]
  //component specific styles: angular will add the styles to a randomly generated attribute and these styles will take precedence over all other styles.
  //or use an external css file
  styleUrls: ['search-box.component.css']
  
})

export class SearchBox {
  @Input('placeholder')
  // use it to pass input data to a component
  text = 'Type your search';
  
  clear(input) {
    input.value = '';
  }
}

Component_Interaction.js

// custom component event

// constants.ts
export const BLUE = '#b13138';
export const RED = '#1976d2'

//color_picker_component.ts
import {Input, Output, EventEmitter} from "@angular/core";

@Component({
  selector: 'color-picker',
  template: `
    <div class="color-title" [ngStyle]="{'color': color}">Pick a Color</div>
    <div class="color-picker">
      <div class="color-sample color-sample-blue" (click)="choose('${BLUE}')"></div>
      <div class="color-sample color-sample-red" (click="choose('${RED}')")></div>
    </div>
  `
})

export class ColorPicker {
  @Input()
  color: string;
  //emit the chosen color event to the outside world
  //by creating a new instance of the EventEmitter class and assign it to new variable called colorOutput
  @Output("color")
  colorOutput = new EventEmitter();
  
  choose(color:string) {
    this.color = color;
    this.colorOutput.emit(color);
    //call the eventEmitter emit function to have users subscribe to the color event by passing it in (instead of the colorOutput..which is internal function)
  }
  
  reset() {
    this.choose('black');
  }
}

//color_previewer.ts
import {Component, Input} from "@angular/core";

@Component({
  selector: 'color-previewer', 
  template: `
    <div class="color-previewer" [ngStyle]="{'color': color}">
      Preview Text Color
    </div>
  `
})

export class ColorPreviwer {
  @Input()
  color:string;
}

//app.ts

import...

@Component({
  selector: 'app',
  template: `
    <color-picker #picker color="red" (color)="previewer.color = $event"></color-picker>
    <color-previewer #previewer></color-previewer>
    <button (click)="picker.reset()">Reset</button>
  `
  // adding #picker because it's not a standard DOM element, we can add hash tags to specify the tag we want to reference 
  //(color) will subscribe to the color event from the event emitter.
})

export class App {
  
}

@NgModule({
  declarations: [App, ColorPicker, ColorPreviewer],
  imports: [BrowserModule],
  bootstrap: [App]
})

export class AppModule {
  
}

platformBrowserDynamic().bootstrapModule(AppModule);

Custom_directive.js

//for custom directive, use attribute selector instead of element selector as used for components

//common.css
.collapsed .collapsible-section {
  display: none;
}

//collapse-on-click.directive.ts
import {Directive, HostBinding, HostListener, Input, Output, EventEmitter} from "@angular/core";

@Directive({
  selector: '[collapse-on-click]'
})
export class CollapseOnClick {
  isCollapsed = false;
  
  @HostBinding("class.collapsed")
  //hostbinding decorator allows us to write to the properties of the host element
  get collapsed() {
    return this.isCollapsed;
  }
  
  @HostListener('click')
  toggle() {
    this.isCollapsed = !this.isCollapsed;
  }
}

//app.ts
import...

@Component({
  selector: 'app',
  template: `
    <div collapse-on-click class="card card-strong disable-text-selection">
      <i class="md-icon collapsible-indicator">arrow_drop_down</i>
      <div class="collapsible-section">
        This page section is collapsible, double click it and it will collapse or expand
      </div>
    </div>
  `
})

export class App {
  
}

//initialize the root module in angular 2

//specify the entry point component to the app
@NgModule({
  declarations: [App, CollapseOnClick],
  //add any non-root components to be display in the browser -camelcase
  imports: [BrowserModule],
  bootstrap: [App]
})

export class AppModule {
  
}
platformBrowserDynamic().bootstrapModule(AppModule);