[Angular 4] sideNav via materialize

	//html
	<ul id="sidenav" class="side-nav" materialize="sideNav" [materializeParams]="sidenavParams" [materializeActions]="sidenavActions" data-activates="sidenav">
	<li><div class="userView">
	<div class="background">
	<img src="images/office.jpg">
	</div>
	<a href="#!user"><img class="circle" src="images/yuna.jpg"></a>
	<a href="#!name"><span class="white-text name">John Doe</span></a>
	<a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>
	</div></li>
	<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
	<li><a href="#!">Second Link</a></li>
	<li><div class="divider"></div></li>
	<li><a class="subheader">Subheader</a></li>
	<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
	</ul>
	<a href="#" data-activates="slide-out" class="button-collapse" (click)="showSidenav()"><i class="material-icons">menu</i></a>
	//component.ts
	import { Component, EventEmitter } from '@angular/core';
	import {MaterializeAction} from 'angular2-materialize';
	sidenavActions = new EventEmitter<any>();
	sidenavParams = [];
	isActived = false;//for fix multiple init ;sidenav-overlay opacity
	public showSidenav(): void {
	this.sidenavParams = ['show'];
	if (this.isActived == false){
	//for avoid multiple initialization
	this.sidenavActions.emit('sideNav');
	this.isActived = true;
	}

view raw ng4-sideNav-materialize.ts hosted with ❤ by GitHub

[Angular 4] http

	// create json file in assets folder
	// in app.module.ts
	import { HttpModule } from '@angular/http';
	imports: [
	BrowserModule,
	FormsModule,
	HttpModule
	],
	// in services.ts
	import { Injectable } from '@angular/core';
	import { Http } from '@angular/http';
	import 'rxjs/add/operator/map';
	@Injectable()
	export class MyDataService {
	constructor(private http: Http) { }
	fetchData(){
	this.http.get('./assets/data/student.json').map(
	(response) => response.json()
	).subscribe(
	(data) => console.log(data)
	);
	}
	obj = {
	id:"1",
	name:"open",
	rollno:"2233"
	}
	success(){return "Successful" ;}
	}
	//in app.component.ts
	import { Component } from '@angular/core';
	import { MyDataService } from './my-data.service';
	@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
	})
	export class AppComponent {
	title = 'app works!';
	constructor(private newServices: MyDataService){}
	ngOnInit(){
	console.log(this.newServices.success());
	console.log(this.newServices.obj);
	this.newServices.fetchData();
	}
	}

view raw ng4-http.ts hosted with ❤ by GitHub

[Angular 4] service

	// cli
	ng g service myData
	//my-data.service.ts
	constructor() { }
	obj = {
	id:"1",
	name:"open",
	rollno:"2233"
	}
	success(){return "Successful" ;}
	//app.module.ts
	import { MyDataService } from './my-data.service';
	providers: [MyDataService],
	//app.component.ts
	import { MyDataService } from './my-data.service';
	constructor(private newServices: MyDataService){}
	ngOnInit(){
	console.log(this.newServices.success());
	console.log(this.newServices.obj);
	}
	//cli
	ng g c product
	//product.component.ts
	import { MyDataService } from './../my-data.service';
	constructor(private newServices: MyDataService){}
	ngOnInit(){
	console.log(this.newServices.success());
	console.log(this.newServices.obj.name);
	}

view raw ng4-service.ts hosted with ❤ by GitHub

[Angular 4] Form

1.via ReactiveFormModele

	//in app.module.ts FormsModule -> ReactiveFormsModule
	import { ReactiveFormsModule } from '@angular/forms';
	imports: [
	BrowserModule,
	ReactiveFormsModule,
	HttpModule
	],
	// in app.component.ts
	import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
	import { FormGroup, FormControl } from '@angular/forms'
	form;
	ngOnInit(){
	this.form = new FormGroup({
	age: new FormControl(123),
	firstName : new FormControl("firstname")
	})
	}
	ageChanged = function(oldVal, newVal){
	console.log(newVal);
	this.form.patchValue({firstName:12322});//change the val of this formcontrol
	//this.foo2(); call the other func
	}
	firstNameChanged = function(oldVal, newVal){
	console.log(newVal);
	}
	onSubmit = function(user){
	console.log(user);
	}
	// in html
	<form [formGroup]="form" (ngSubmit) = "onSubmit(form.value)">
	<h1>FORM</h1>
	<input type="text" name="age"
	(ngModelChange) = "ageChanged(oldVal, newVal= $event)"
	placeholder = "123"
	formControlName = "age"
	>
	<input type="text" name="firstName"
	(ngModelChange) = "firstNameChanged(oldVal, newVal= $event)"
	placeholder = "firstName"
	formControlName = "firstName"
	>
	<input type="submit" value="submit">
	</form>
	/*
	//
	// Validators
	//
	import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
	import { FormGroup, FormControl, Validators } from '@angular/forms'
	@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
	})
	export class AppComponent {
	title = 'app works!';
	form;
	ngOnInit(){
	this.form = new FormGroup({
	age: new FormControl(null, Validators.compose([
	Validators.required,
	Validators.minLength(2),
	Validators.maxLength(4)
	// Validators.patten('\\w\\\');
	])),
	firstName : new FormControl("firstname",this.textValidator)
	})
	}
	ageChanged = function(oldVal, newVal){
	console.log(newVal);
	this.form.patchValue({firstName:12322});//change the val of this formcontrol
	//this.foo2(); call the other func
	}
	foo2 = function(){console.log("foo2 function called")}
	textValidator(control){
	if(control.value.length < 3){
	return {'firstName':true}
	}
	console.log(control.value);
	}
	firstNameChanged = function(oldVal, newVal){
	console.log(newVal);
	}
	onSubmit = function(user){
	console.log(user);
	}
	}
	*/

view raw ng4-form-via-ReactiveFormModule.ts hosted with ❤ by GitHub

2.via FormModele

	// in html
	<form #userform = "ngForm" (ngSubmit) = "onSubmit(userform.value)">
	<input name="first" ngModel required #first="ngModel">
	<input type="text" placeholder="lastname" name="lastname" ngModel>
	<select name="lang" ngModel>
	<option value="a1">a1</option>
	<option value="a2">a2</option>
	<option value="a3">a3</option>
	</select>
	<input type="submit" value="submit">
	</form>
	<p>First name value: {{ first.value }}</p>
	// in module.ts
	onSubmit = function(user){
	console.log(user);
	console.log(user.first);
	console.log(user.lastname);
	console.log(user.lang);
	}

view raw ng4-form hosted with ❤ by GitHub

[Angular 4] Todo List

	//in app.component.ts
	export class AppComponent {
	title = 'app works!';
	// Data array
	todoListData = ["aaa", "bbb", "ccc"];
	inputText = "";
	// function
	pushItem = function(){
	if(this.inputText != ""){
	this.todoListData.push(this.inputText);
	this.inputText = "";
	}
	};
	removeItem = function(index){
	this.todoListData.splice(index,1);
	};
	}
	// in app.component.html
	<div class="main">
	<div>
	<h1>Todo List</h1>
	<input type="text" placeholder="Add Item" [(ngModel)]="inputText">
	<button (click)="pushItem()">Add</button>
	</div>
	<ul>
	<li *ngFor="let item of todoListData; let i = index">
	{{i}}{{item}}
	<span (click)="removeItem(i)">X</span>
	</li>
	</ul>
	</div>

view raw ng4-todoList.ts hosted with ❤ by GitHub

[Angular 4] Router 用法

	//in app.module.ts
	import { RouterModule } from '@angular/router';
	imports: [
	BrowserModule,
	FormsModule,
	HttpModule,
	RouterModule.forRoot([
	{
	path: 'member',
	component: MembersComponent
	},
	{
	path: 'product',
	component: ProductComponent
	}
	])
	],
	//in app.component.html
	<a routerLink="/member">member</a>
	<a routerLink="/product">product</a>
	<router-outlet></router-outlet>

view raw ng4-router.ts hosted with ❤ by GitHub

1.在app.module.ts import routermodule

2.設定forRoot path and component

3.在html部分 tag a 裡面使用routerLink去辨識，然後內容會顯示在router-outlet