Note for course Angular 1: Basics & Components & Databinding & Directives

1// install nodejs
2
3// install angular CLI
4sudo npm install -g @angular/cli@latest

1// npm version 7.5.4 detected.
2// The Angular CLI currently requires npm version 6.
3
4// SOLUTION
5// using nvm
6<https://github.com/nvm-sh/nvm>
7
8// Check the corresponding versions between nodejs - npm
9<https://nodejs.org/en/download/releases/>

1// new app
2ng new my-new-app
3
4// serve
5ng serve
6ng serve --port 4300
7
8// create component
9ng generate component <name>
10ng g c <name> # shorthand
11ng g c <name> --skipTests true # without test files
12ng g c <name> --selector <app-name> # with selector
13
14// create directive
15ng generate directive <name>
16ng g d <name>

1// crate an app / project
2// for a moment, choose "No" for first 2 options + CSS
3ng new my-first-app
4cd my-first-app
5ng serve // port 4200
6ng serve --port 4300 // custom

1// cd to project
2npm i --save bootstrap
3
4// angular.json
5// -> changes "styles"
6"styles": [
7	"node_modules/bootstrap/dist/css/bootstrap.min.css",
8  "src/styles.css"
9],
10
11// rerun
12ng serve --port 4300
13// Check?
14// Open page > Inspect > Sources > styles.css -> there is bootstrap there!

1// Disable "strict mode"
2// tsconfig.json
3strict: false

1// recipe.model.ts
2export class Recipe { // <- TYPE!!!
3	public name: string;
4	public description: string;
5	public imagePath:
6
7	constructor(name: string, desc: string, imagePath: string) {
8		this.name = name;
9		this.description = des;
10		this.imagePath = imagePath;
11	}
12}
13
14// use it?
15// .component.ts
16export class RecipeListComponent implements OnInit {
17	recipes: Recipe[] = [ // using our model "Recipe" but array of Recipe(s)
18				// ^ just a type
19		new Recipe('Test', 'A test recipe', 'http//img/url'),
20		// there can be more...
21	];
22}
23
24// then use in .html
25{{ .name }}, {{ .description }} ... // with *ngFor
26
27// below are the same
28<img
29	src="{{ recipe.imagePath }}  // string interpolationing
30	[src]="recipe.imagePath"     // property binding
31>

1// ANOTHER WAY OF DECLARING MODEL
2// Typescript Constructor Shorthand
3export class Recipe { // <- TYPE!!!
4	constructor(public name: string, public description: string, public imagePath: string) {}
5}

1export class ... {
2	element: {
3		type: string,
4		name: string,
5		content: string
6	}; // :{} -> not value, it's define a type -> make sure element may only have this type
7}
8
9// and if
10element = {...} // this's assign value (like normal JS syntax)

1new EventEmitter<void>(); // event without any information to emit!
2
3onSelected() {
4	this.recipeSelected.emit(); // without element to emit
5}

1// Receive an event and then assign directly (no need any method)?
2<app-recipe-list
3	(recipeWasSelected)="selectedRecipe = $event"></app-recipe-list>
4// event comes from "recipeWasSelected" will be assigned to "selectedRecipe"

1// with ngModel
2<input [(ngModel)]="newServerName">
3<button (click)="onAddServer()"></button>
4// component.ts
5onAddServer(){}
6
7// with local reference
8<input #serverNameInput>
9<button (click)="onAddServer(serverNameInput)"></button>
10// component.ts
11onAddServer(nameInput: HTMLInputElement){}

1// in .html
2<input #serverContentInput></input>
3
4// in component.ts
5
6// if wanna access selected element inside ngOnInit()
7@ViewChild('serverContentInput', {static: true}) serverContentInput: ElementRef;
8
9// if DON'T wanna ... ngOnInit()
10@ViewChild('serverContentInput', {static: false}) serverContentInput: ElementRef;
11// in Angular 9+, no need to add {static: false} in this case!
12
13// Then we can use property "serverContentInput" in other place in .component.ts

1this.serverContentInput.nativeElement.value = 'something';

1// child html
2// put where you wanna to display "Text"
3<ng-content></ng-content>
4
5// parent html
6<app-server>Text</app-server>

1constructor > ngOnChanges > ngOnInit > ngDoCheck
2> ngAfterContentInit > ngAfterContentChecked
3> ngAfterViewInit > ngAfterViewChecked
4// whenever input changes -> ngOnchanges
5// whenever there are changes -> ngDoCheck

1// How to use?
2export class ... implements OnInit, OnChanges, OnDestroy {
3	ngOnInit() {}
4	ngOnChanges() {}
5	ngOnDestroy() {}
6}

1// testing ngOnChanges
2import { OnChanges, SimpleChanges } from '@angular/core';
3export class ... implements OnChanges {
4	@Input() element: ....
5
6	OnChanges(changes: SimpleChanges) {
7		console.log('ngOnChanges called!');
8		console.log(changes);
9	}
10}
11
12// then open Inspect
13// in object element: SimpleChange
14// there are "currentValue", "firstChange", "previousValue",...

1// DoCheck
2// -> wanna do something on evert change detection cycle
3import { DoCheck } from '@angular/core';
4export class ... implements DoCheck {
5	ngDoCheck() {
6
7	}
8}

1// onDestroy()
2// Called when component is destroyed -> when removed from the DOM
3// Wanna make a test?
4
5// in child component.ts
6ngOnDestroy() {
7	console.log("ngOnDestroy called!");
8}
9
10// in parent html
11<button (click)="onDestroyFirst()>Destroy component</button>
12
13// in parent component.ts
14onDestroyFirst() {
15	this.serverElements.splice(0, 1);
16}

1// child component.ts
2export class ...{
3	@ContentChild('contentParagraph') paragraph: ElementRef;
4}
5
6// In case you wanna call "contentParagraph" in parent component.ts
7// => use @ViewChild() in parent component.ts as usual!

1// WRONG
2<li *ngFor="..." *ngIf="..."></li>

1// instead of using * like
2<div *ngIf="!onlyOdd"></div>
3
4// we can use (angular will translate *ngIf to something like that)
5<ng-template [ngIf]="!onlyOdd">
6	<div></div>
7</ng-template>

1// then add it in .module.ts
2@NgModule({
3	declarations: [appHighlight]
4})
5export class .... {}

1@Directive({
2	selector: '[appHighlight]'
3})
4export class ... {
5	@HostBinding('style.backgroundColor') bgColor: string = 'transparent';
6						//	^like normal JS					^custom var		  ^ gives it initial value
7
8	// then access it likes
9	ngOnInit() {
10		this.bgColor = 'blue';
11	}
12
13}

1// if we wanna use input for custom directive?
2<p appHighlight [defaultColor]="'yellow'">Text</p>
3// |            ^ we could use defaultColor="yellow" but be careful, we must
4// |              be sure that there is no conflict with already-have attributes!
5// ^ we could use [appHighlight]="'red'" if there is any alias in the directive
6
7// in .directive.ts
8@Directive({...})
9export ... {
10	@Input() defaultColor: string = 'transparent';
11	@Input('appHighlight') highlightColor: string = 'blue';
12
13	// some commands using above 2 inputs.
14}

1// unless directive
2import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
3
4@Directive({
5	selector: '[appUnless]'
6})
7export class UnlessDirective {
8	@Input() set appUnless(condition: boolean) {
9				// |   ^make sure the same as the selector!
10				// ^a setter of a property which is a method which get executed whenever
11				//  the property changes
12		if (!condition) {
13			this.vcRef.createEmbeddedView(this.templateRef);
14		} else {
15			this.vcRef.clear(); // remove everything from this place in the DOM
16		}
17	}
18
19	constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef {
20						   //     ^ what to be applied?                  ^ where to be applied?
21														//     ^ look like ElementRef but for ng-template
22	}
23}
24
25// don't forget to add it to declaration in module.ts

1@Directive({
2	selector: '[appDropdown]'
3})
4export class DropdownDirective {
5	@HostBinding('class.open') isOpen = false;
6	@HostListener('click') toggleOpen() {
7		this.isOpen = !this.isOpen;
8	}
9}

1// closing dropdown from anywhere
2@Directive({
3	selector: '[appDropdown]'
4})
5export class DropdownDirective {
6	@HostBinding('class.open') isOpen = false;
7	@HostListener('document:click', ['$event']) toggleOpen(event: Event) {
8		this.isOpen = this.elRef.nativeElement.contains(event.target)
9				? !this.isOpen : false;
10	}
11	constructor(private elRef: ElementRef) {}
12}