- Component
cmd: `ng g c component_name`
Example: `ng g c employeelist`
2. Interpolation
Interpolation refers to embedding expressions into marked up text. By default, interpolation uses as its delimiter the double curly braces, {{ and }}.
Example:
<li> {{ employee.name }}</li>
3. Service
3.1 Share data
3.2 Implement application logic
cmd: `ng g s service_name`
Example: `ng g s employee`
4. ngIf, ngSwitch, ngFor
4.3 ngFor
5. HTTP, Observables and RxJS
5.1 employees.json
`[
{“id”: 1, “name”: “Name 1”, “age”: 21},
{“id”: 2, “name”: “Name 2”, “age”: 22},
{“id”: 3, “name”: “Name 3”, “age”: 23},
{“id”: 4, “name”: “Name 4”, “age”: 24}
]`
5.2
ng g s employee
5.3 Register providers
5.4 Create Interface employee
5.5 Fetch data using HTTP
npm install — save rxjs-compat
5.6
cmd: `ng g c list-employee`
6. HTTP Error Handling
import ‘rxjs/add/operator/catch’;
import ‘rxjs/add/observable/throw’;
7. Routing and Navigation
cmd: ng g c department-list`
add into routes
app-routing.mudule.ts
{ path: ‘department’, component: DepartmentComponent },
{ path: ‘employee’, component: EmployeeListComponent }
app.module.ts
8. Wildcard Route and Redirecting Routes
Wildcard Route
. cmd: `ng g c page-not-found`
. app-routing.module.ts
. put it on the bottom
{ path: ‘**’, component: PageNotFoundComponent }
Redirecting Routes
app-routing.module.ts
{ path: ‘’, redirectTo: ‘/department’, pathMatch: ‘prefix’ }
9. Route Parameters
app-routing.module.ts
{ path: ‘employee/:id’, component: EmployeeDetailComponent},
and export
employee-list.component.ts
onSelect(employee) {
this.router.navigate([‘/employee’, employee.id]);
}
10. Binding data to a model
10.1 Create class User
10.2 Init new User model
10.3 Binding data
