Angular Tips n' Tricks

angular-6-tips-n-tricks.md

This doc is using Angular 6 with Angular CLI.

Using ngModel

1. Make sure to import FormsModule

	import { FormsModule, ReactiveFormsModule } from '@angular/forms';
	...
	@NgModule({
		imports: [
			FormsModule      
		],
	...

2. Add ngModel attribute to input

	<input [(ngModel)]="something"/>

Use Routes

1. Create Route Module
2. Add Route constant

	const appRoutes: Routes = [
		{ path: 'wiki-search', component: WikiSearchComponent }
	];

3. Import routes, Export module

	@NgModule({
		imports: [RouterModule.forRoot(routes)],
		exports: [RouterModule]
	})

4. Import Routing module into App.Module

import { AppRoutingModule } from './app-routing.module';

Using .map(...)

(from http://slides.com/robwormald/everything-is-a-stream)

	var numbers = [1, 2, 3, 4, 5];

	function double(number) {
	return number * 2;
	}

	var doubledNumbers = numbers.map(double);
	//[2, 4, 6, 8, 10]

Using .filter(...)

	var numbers = [1, 2, 3, 4, 5];

	function greaterThanThree(value) {
	return value > 3;
	}

	var numbersGreaterThanThree = 
	numbers.filter(greaterThanThree);
	//[4, 5]

Using .next(...)

	var numbers = [1, 2, 3];

	//.values() returns an iterator
	var numIterator = numbers.values();

	numIterator.next() //{value: 1, done: false }
	numIterator.next() //{value: 2, done: false }
	numIterator.next() //{value: 3, done: false }
	numIterator.next() //{done: true}

Using Map()

	var myMap = new Map();

	myMap.set('a', 1);
	myMap.set('b', 2);
	myMap.set('c', 3);

	//.values() returns an iterator
	var valueIterator = myMap.values();

	valueIterator.next() //{value: 1, done: false }
	valueIterator.next() //{value: 2, done: false }
	valueIterator.next() //{value: 3, done: false }
	valueIterator.next() //{done: true}

	//.keys() returns an iterator
	var keyIterator = myMap.keys();

	keyIterator.next() //{value: 'a', done: false }
	keyIterator.next() //{value: 'b', done: false }
	keyIterator.next() //{value: 'c', done: false }
	keyIterator.next() //{done: true}

	//.entries() returns an iterator
	var entryIterator = myMap.entries();

	entryIterator.next() //{value: ['a', 1], done: false }
	entryIterator.next() //{value: ['b', 2], done: false }
	entryIterator.next() //{value: ['c', 3], done: false }
	entryIterator.next() //{done: true}

Using Promises

	fetch('foos.json')
		.then(function(res){
			return res.json();
		})
		.then(function(foos){
			return fetch('bars.json')
				.then(function(res){
					return res.json();
				})
				.then(function(bars){
					return [foos, bars];
				})
		})
		.then(function(results){
			//do stuff with foos and bars
		});

Using Observables

	var observable = Observable.create((observer) => {
	  setTimeout(() => {
		observer.next('some event');
	  }, 500);
	});
	var observable = (...)
	observable.subscribe(
	  (event) => {
		// handle events
	  },
	  (error) => {
		// handle error
	  },
	  () => {
		// handle completion
	  }
	);