Angular
Leaning
Component ✅
decorators Component
template & templateUrl
selector
style & styleUrls
Module ❓
Databinding ❓
String interpolation ❓
Property Binding ❓
Property Binding vs String Interpolation ❓
Event Binding
Using data with event binding
Passing
Two-Way-Databinding [(NgModel)]
Angular CLI
Pugin
Blog
Issue
ng build --prod --base-href Or ng build --prod --base-href ./ Open index.html error
Route error navigation : { useHash: true }
RgRx
Tip & Tick
Set angular cli build && firebase deploy
Add "deploy": "ng build --prod --base-href && firebase deploy" in package.json Then npm run deploy
Error Missing : npm rebuild node-sass
Input Variable undefined : use ngOnInit() Lifecycle Hooks
Check set value Date: if (${customer.start_date} !== '0000-00-00') { form.controls['start_date'].setValue(customer.start_date); }
Unauthorized Workshop Angular 6 : Add Condition if Message === 'Unauthorized' && status === 401 then clear access token and redirect in handleError method file http.service.ts then remove UnauthenticationGuard Login route
ng build css not working : ng build --prod --base-href --extract-css false
Validate Two Form
Breadcrumb Component
Dynamic Form : FormGroup > nameArr?.control & formArrayName > FormGroupName
ng build --prod Error in script xxx.js from Terser : npm install terser@3.14.1
Karma Unit Test
it
Upgrade Version : Upgrade Version
ng update angular/cli angular/core
Activated Route
_activatedRoute.params.subscribe : ใช้สำหรับดึงค่า Parameter ของ Routing ที่ถูกกำหนด ตัวอย่าง /product/:id เมื่อ id ของ url เปลี่ยนแปลงจะถูกโหลดค่าใหม่อีกครั้ง
_activatedRoute.snapshot.params.ObjectName : ใช้สำหรับดึงค่า Parameter ของ Routing และ Data Object ของ Parameter ได้ ข้อแตกต่างจาก _activatedRoute.params.subscribe คือ เมื่อ url เปลี่ยนจะไม่โหลดค่าใหม่ทำเพียงครั้งแรกครั้งเดียว
การแนบ Parameter และ ดึง Parameter จาก URL
Routing
_activatedRoute.queryParams.subscribe : ใข้สำหรับดึงค่า Parameter ของ Url ที่แนบมา ตัวอย่าง /product?from=2019-08-01&to=2019-09-01
แนบ Parameter ให้กับ URL
navigationExtras: NavigationExtras = { queryParams: {
key: value,
key: value,
.....
}
}
_router.navigate([url], navigationExtras)
Upgrade 7 to 8
npm uninstall angular-devkit/build-angular
npm install angular-devkit/build-angular
HttpClientModule
Header
Loop value enum
Directive
Get value enum
enum E { A, B }
const keys = Object.keys(E).filter(k => typeof E[k as any] === "number"); // ["A", "B"]
const values = keys.map(k => E[k as any]); // [0, 1]
Custom Theme
Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead : Remove Import Lazyload module in app module
PWA
ng add angular/pwa <project_name>
Check new file: manifest.webmanifest
Check assets new folder icon
Check angular.json (ServiceWorker is true) & index.html (link manifest, meta theme-color)
Google Chrome > Application > Service Workers
Click Offline & Refresh
Run command: http-server -p 8080 -c-1 dist/<project_name>
AppModule: Import ServiceWorkerModule