Please enable JavaScript.
Coggle requires JavaScript to display documents.
Angular - udemy.com/angular-5-concept-mastery-course (Routing in Angular,…
Angular - udemy.com/angular-5-concept-mastery-course
Introduction
node and angular cli
yarn start or ng serve
Architecture
Modules can imported and exported
Modules are components and services
main.ts is an entry point
Components
Component is a template, class and metadata
ng generate component <folder/component>
<app-component-name></app-component-name>, <div class="app-test"></div> or <div app-test></div>
templateUrl can be template and styleUrl can be style
Interpolation
<html>{{ javascript-code }}</html>
Property Binding
[property]="javascript-code", property="{{ javascript-code }}" or bind-something="javascript-code"
Class Binding
class="style-name", [class]="javascript-code", [class.style-name]="javascript-code" or [ngClass]="javascript-code"
Style Binding
[style.css-attribute]="'css-value'", [style.css-attribute]="javascript-code" or [ngStyle]="javascript-code"
Event Binding
template -> class (event binding) and class -> template (data binding)
(event)="method($dom-event)" or (event)="variable-name='value'"
Template Reference Variables
(event)="method(html.property)"
Two(2)-Way Binding
[(ngModel)]="javascript-code" and {{ javascript-co de }}
ngIf Directive
*ngIf="javascript-code"
<element *ngIf="javascript-code; else elseBlock"></element> <ng-template #elseBlock></ng-template>
<div *ngIf="javascript-code; then thenBlock; else elseBlock"></div><ng-template #thenBlock></ng-template> <ng-template #elseBlock></ng-template>
ngSwitch Directive
<div [ngSwitch]="javascript-code"><div *ngSwitchCase="'value'"></div></div>
<div [ngSwitch]="javascript-code"><div *ngSwitchCase="'value'"></div><div *ngSwitchDefault></div></div>
ngFor Directive
<div *ngFor="let variable of variables">{{ variable }}</div>
<div *ngFor="let variable of variables; setting as s">{{ s }} {{ variable }}</div>
Component Interaction
Parent -> Child (Data
Input())
and Children -> Parent (Data
Output())
Parent [parentData]="value" -> Children import { Input } from
'@angular
/core';
Input()
public parentData; or
Input('parentData')
public name;
Children import { EventEmitter } from
'@angular
/core';
Output()
public childrenData = new EventEmitter(); this.childEvent.emit(); -> Parent (childEvent)="message=$event"
Pipes
{{ variable | pipe }}
Dependency Injection
Dependency Injection define the service class
Services
Class with a specific purpose
Share data, implement application logic and external interaction
Using a Service
ng generate service <folder/service>
Add in the providers of app.module, they are imported in the component and used in the constructor
Injectable()
HTTP & Observables
http call (request) <-> Observable (response)
Observables are a sequence of items that arrive asynchronously
RxJS extension library
Fetch Data Using HTTP
Import BrowserModule and HttpClientModule
Construtor define HttpClient
Bind in the component
HTTP Error Handling
catch(this.errorHandler) and errorHandler() function
Routing in Angular
Include route when create a new project
Import the route in the component and export in the app component
In the app module import the components in the routing and declare
<router-outlet></router-outlet>
Attribute routerLink=""
Wildcard Route & Redirecting Routes
Setting page not found
Configure the path: ** and the PageDefault
Route Parameters
Configure the path: url/:id
Return the parameter from the url parseInt(this.route.snapshot.paramMap.get('id'))
paramMap Observable
(click)="goPrevious()" and (click)="goNext()"
Optional Route Parameters
this.router.navigate(['/url'])
Send query string in the url
Relative Navigation
Url will be like
Child Routes
Define the child routes in the routes const