Angular 2 Beginner Notes
//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 = '';
}
}
//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);
// 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);