Travel through Angular (Tutorial Note: )

Make a project

$ npm install -g @angular/cli
$ ng new helloworldapp
$ alias ng='/c/Users/KreivenWang/AppData/Roaming/npm/ng' //If ng command is not working. Besides, you can also configure system environments 
$ cd helloworldapp
$ npm i
$ npm start

in package.json, scripts looks like:

"scripts": {
  "ng": "ng",
  "start": "ng serve --open",
  "build": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

The --open flag opens a browser to http://localhost:4200/.

Make a component

$ ng generate component paper

Pipe

Pipes are a good way to format strings, currency amounts, dates and other display data. Angular ships with several built-in pipes and you can create your own.

 - {{item.status | uppercase}}

Two-way binding

name: 
   

Event binding

eventhandler:

onSelect(item: ToDoItem): void {
  this.selectedItem = item;
}

Directives

ngIf

{{selectedItem.id}}

ngFor

  

    [{{item.id}}]
    
      
    
     - {{item.status | uppercase}}
  

Style the selectedItem

in todoitems.component.css:

.wrapper {
  border-left: solid 5px tomato;
  background-color: #f7e8d9;
  height: 80px;
  margin: 5px;
  vertical-align: center;
  position: relative;
}

.wrapper-selected{
  border-left: solid 15px tomato;
  background-color: #f7cda4;
}

@Input Decorator

in todoitem-detail.component.ts:

import  { Component,  OnInit,  Input }  from  '@angular/core';
//in class:
@Input() todoitem: ToDoItem;

in todoitems.component.html:

ToDoItemsComponent.selectedItem => ToDoItemDetailComponent.todoitem
(It's a one way data binding from the selectedItem property of the ToDoItemsComponent to the todoitem property of the target element, which maps to the todoitem property of the ToDoItemDetailComponent.)

Service

ng generate service paper

paper.service.ts:

import { Injectable } from '@angular/core';
import { Paper } from '../models/paper';
import { MessageService } from './message.service';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';

@Injectable()
export class PaperService {
  private papersUrl = 'api/papers';
  constructor(
    private http: HttpClient,
    private messageService: MessageService) { }

  getPapers(): Observable {
    //return of([MockPaper]);
    return this.http.get(this.papersUrl)
      .pipe(
        tap(papers => this.log('fetched papers'))
      );
  }

  private log(message: string) {
    this.messageService.add('PaperService: ' + message);
  }
}

message.service.ts:

import { Injectable } from '@angular/core';

@Injectable()
export class MessageService {
  public messages: string[] = [];
  add(message: string) {
    this.messages.push(message);
  }
  clear() {
    this.messages = [];
  }
}

QA

[TS] How can I export/import an Enum?

status.ts:

export enum Status{On = 1, Off = 0, HalfOn, HalfOff}

and in required.ts file import like the way given below:

import {Status} from './status';

Can't bind to 'ngModel' since it isn't a known property of 'input'

Although ngModel is a valid Angular directive, it isn't available by default.
It belongs to the optional FormsModule and you must opt-in to using it.
In the app.module.ts, I just added :

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

[TS] What does class multiple constructors looks like?

import { ToDoStatus } from './todostatus';
export class ToDoItem {
  id: number;
  content: string;
  status: ToDoStatus;
  details: string[];
  constructor();
  constructor(id: number, content: string);
  constructor(id?: number, content?: string) {
    this.id = id;
    this.content = content;
    this.status = ToDoStatus.Pending;
    this.details = ['What\'s the detail for' + content + '?', 'Anything should tell?'];
  }
}

Notice of angular-in-memory-web-api:

Notice the import for app.module.ts, otherwise data won't be shown:

import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
@NgModule({
  imports: [
    [...]
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, { dataEncapsulation: false })
    ],
  [...]
})

createDb() function returns an object. So at 'return' line, don't forget to wrap 'papers' with {}. in-memory-data.service.ts:

createDb() {
    const papers = [...];
    return { papers };
}

Plus

CSS Transition

animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

Begin after page loaded

The key is animation-delay parameter set to 0s

@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

.brand {
  /* This section calls the slideInFromTop animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromTop;
}