Course: Getting Started with Angular and TypeScript

Duration: ~6 hours
Instructor: Suthep Sangvirotjanaphat
Facebook:
https://facebook.com/greatfriends.biz
https://facebook.com/suthep
Youtube: GFBiz

Course Content:

Day 1 (1.5 - 2 hours per day)

• How an Angular app starts
• Creating a component
  • Template expression
  • ngIf, ngFor
  • ngClass and ngStyle
  • Basic form inputs and two-way binding
• Basic knowledge about TypeScript

Instructor:

• Creating one-many album and songs page

Homework:

• Creating BMI calculation page
• Add Like/Unlike button

Day 2

• Component Composing - Input and Output
• Creating reusable/shared services - Dependency Injection

Instructor:

• Creating AlbumList and SongPlayer

Homework:

• Extract sub-component from existing component that get input and send output event.

Day 3

• Consume API services with HttpClient
• Creating multiple page in web site - Routing and Outlet
• Publish your Angular app to server

Instructor:

• Read/Write data from REST services
• Adding navigation menu to the web site

Prepare your machine before the class:

1. Install current version of NodeJs (https://nodejs.org/en/download/)
2. Type these commands in your console (command prompt)

> npm i -g @angular/cli
> npm i -g typescript

> C:
> cd \
> md train-ng
> cd train-ng
> ng new musics
  answers No, and select CSS when prompted
> ng serve -o

Now it should show up new web application in your browser at http://localhost:4200

3. press Ctrl+C twice to shut down Angular development server. In C:\train-ng\musics install a few packages as follows:

> npm i lodash jquery bootstrap 
> npm i @types/bootstrap @types/lodash -D
> npm i @fortawesome/angular-fontawesome
> ng add @ng-bootstrap/ng-bootstrap