分類：Angular

Angular Providers

一直以來對 Angular Providers 這部份都還是有存在著半知半解的狀態，就趁著這次機會一次搞懂它吧！ Providers 提供了四種注入方式 Class Provider : useClass Value Provider: useValue Fa

10.09

如何在 Angular 獲取 URL 資訊

在實作裡，很多時後我們會將一些必要資訊記錄在網址上，直接在網址裡就能得到我們要的訊息不用再透過組件將資訊層層傳遞，達到解耦合的效果。註：一切一切都只是我用來舉例，不代表為鐵人賽網址真正的實際規劃哦！例如：我的鐵人賽主題網址為 https://ithel

10.08

如何在 Angular 建立 Breadcrumb (麵包屑)

麵包屑為提供網站裡的導航，讓使用者容易了解當下所在的位置剛好也呼應前一天使用 router 的部份現在位置：首頁 / 列表 / 內容 Angular 裡的 router 架構通常會命名為 app-routing.module.ts 這裡會需要帶點 rx

10.07

Angular 路由守衛(登入篇)

經過了昨天的介紹，今天就來看看使用登入範例囉今天的登入資料依然是使用 FakeStoreAPI 這裡就做個簡單的驗証，沒填值就不能按按鈕若是有成功得到 token 就裝這狀態記錄在 setToken$ 裡在 canEnter 訂閱剛剛的 setToken

10.06

Angular 路由守衛

我們在開發的過程中，經常會遇到需要某些權限才能進入的頁面，這時後就會需要路由守衛的機制啦，而它最常用在登入畫面時 Angular CLI 提供了命令列工具，可以快速建立路由守衛框架檔案：或官網介紹：guard 執行後，Angular CLI 會問我們需要

10.05

Angular 筆記 css 樣式篇

今天就只是個筆記，單純記錄寫法如何使用，以便自己日後查找，畢竟人非聖賢、會忘難免 XD 套用 className 變數為 isDark，value 必需為 boolean 在 html 的 dom 裡設定 https://angular.tw/api/comm

10.04

Angular 客製彈出視窗

因為我的這個 blog 需要一個彈出視窗做提示，而套件裡的樣式我都不喜歡，所以今天就來客製化一個吧！這次的彈出視窗會使用 Angular Material 裡的 cdk 來做開發安裝 cdk 注意：若發現 @angular/cdk 裡的某些功能不能掛載，

10.03

Angular ViewChild 與 ViewChildren 介紹

ViewChild 這個屬性在 Angular 是屬於很常用的一部份今天就來了解一下 ViewChild 與 ViewChildren 的差別與使用方式吧！ HelloComponent 子組件屬性裝飾器，用於配置一個檢視查詢。變更檢測器會在檢視的 DO

10.02

Angular pipe ironman2021

如何在 Angular 取得當前頁面的絕對路徑

當有一個連結需要另開新頁時，在 develop 或 production 需要對應到正確的路徑 Angular 提供了這個方式 https://angular.tw/api/common/Locationprepareexternalurl 所以我就做了以下的

10.01

Angular 淺拷貝之日記文

又踩雷啦啊哈哈哈哈哈。來重現一下遇到的情境吧一開始建了一個 fruit 的物件，裡面有 apple 與 banana 這兩樣空物件在 OnInit 時，賦予了 apple 與 banana 值當我按下 button Click 的時後， apple

09.30

Angular TypeScript ironman2021

使用 Angular 做檔案編碼檢測 (detect-encoding)

前一陣子，後端有個需求是在檔案上傳前，需要提前知道上傳的檔案編碼是 UTF-8 或是 ascii 等，才能決定要不要將檔案放進資料庫，或是在這之前再做一次轉檔。今天的內容跟 Angular 比較沒有關係，屬於套件分享，但因也是使用 Angular 實作，所

09.29

Angular 轉換 API 資料格式 (Adapter)

今天的內容屬於設計模式的一種。當我們從後端接到資料後，有時後資料格式往往不是如我們所想，所以會再加工做個轉換的動作。所以就要使用 TypeScript 來做個轉接器，轉成我們所需的資料！就拿前幾天的文章 Angular 如何取得 API 資料繼續做介紹

09.28

Angular ElementRef、TemplateRef、viewContainerRef 的區別

今天就來聊聊 ElementRef、TemplateRef、viewContainerRef，者實說，在這之前一直都沒很認真搞懂這部份就趁著這次機會一起來看看吧！用於檢視 HTML DOM 元素，可以在瀏覽器中取得 DOM 的原生 Element Elem

09.27

Angular ng-template 與 ngTemplateOutlet

ngTemplateOutlet 這裡我解釋為 ng-template 裡的插槽來看看實際上會是如何使用先來段程式碼，這裡為一筆物件資料 HTML ngTemplateOutlet 這個插槽的名字我們取做 jsonData 在 ng-template 的

09.26

Angular ng-container 與 ng-template

接續昨天的範例。今天要聊的是 ng-container 與 ng-template 上面程式碼所要表達的是，若是資料大於 0 筆，頁面上就會呈現列表，沒有資料的時後在畫面上顯示 No Data ng-container 在 Angular 的 templat

09.25

Angular RxJS ironman2021

Angular ngIf 與 Async Pipe

當我們在 template 訂閱一組資料，而需要對它做一些邏輯處理的時後。 .ts .html 若像上述這樣的寫法，會造成重覆訂閱而增加 server 的負擔，所以在實作上，通常會避免這情況發生將 html 寫法稍做修改將 products$ async

09.23

Angular RxJS ironman2021

Angular 如何取得 API 資料

既然昨天已經說了 http post 這件事，那今天就來說說 http get 這部份吧！今天的資料依然使用 FakeStoreAPI 樣式套用 Angular Material 從 api 取得列表後，把資料渲染到 html 上 app.module.ts

09.22

Angular RxJS ironman2021

Angular 如何將多筆資料上傳後，取得全部回傳資料，再送到另一支 API

來回顧一下前幾天的日記文 Angular 圖片上傳之...日記文程式碼流程規劃之...日記文與今天介紹的內容有關，如何將多筆資料上傳後，取得全部回傳資料後再將其資料整理，送到另一支 API 這次將會使用 RxJS 來做處理我有一筆訂單，裡面有許多的產品

09.21

Angular 下拉選單如何選定預設值

當表單送出後，資料庫會記錄送出後的值，下次再進來時，會需要重現上一次所填寫過的內容，這在實作上是很常遇到的事情。原以為這是件很簡單的事，讀取資料後，直接把值填上後即可(我想得太簡單了)，當實作時，卻怎麼樣也選不了預設值，後來發現在需要在 select 裡

09.20

Angular 冒泡事件

今天就來個說個在新手時期很常遇到，但卻不知為什麼會發生的問題來看一下我們前幾天的表單範例，與圖上 console 的部份在操控表單的時後，發現在點選新增欄位時，連submit 也一起被觸發了！這是怎麼一回事呢！！！，明明就沒有按送出呀！原來是 Java

09.19

Angular Reactive Forms 自訂表單驗証器

有表單當然少不了驗証，這次的情境是名字是必填欄位。手機不一定會是必填，但填了後必須符合手機的格式，09 開頭共 10 碼來囉！！在這個 form 表單的下方新增一個驗証方式，動態驗証就寫在 validator 這裡面 .ts 若是號碼填寫錯誤，把

09.17

Angular 圖片上傳之日記文

本來預定今天要發佈的文章延後了，今天要要來分享這一兩天的踩雷心路歷，花了一半天時間，連鐵人都沒時間寫，還好有一些些存檔 ! 這次公司專案需要做到圖片上傳這部份的處理，因這次的套件對於手動上傳沒有支援太多，所以需要自己處理這部份，接著就是一連串的踩雷過程...

09.16

Angular Reactive Form 表單 setValue 與 patchValue 差異

今天就來說說 setValue 與 patchValue 差異這部份吧一開始不太能理解這 setValue 與 patchValue 到底差在哪裡(官網的說明讓我不是很懂，理解力太差了 XD)，不是一樣都是賦值給 form 嗎這幾天在使用的過程中，踩了一些

09.15

Angular Reactive Form 響應式表單 (formArray)

昨天介紹了 formControl 如何使用今天來介紹 formArray 這部份老實說花了我不少時間才懂 XD 今天要在表單裡加上喜好，喜好會有很多，所以我們來使用 formArray 處理，預設值先給它一個空陣列 ts 程式裡的 favorites 是一

09.14

Angular Reactive Form 響應式表單 (formControl)

昨天我們看了一長串的表單使用範例都是經過理解消化後所寫出來的 code ，那麼今天就來聊一聊消化的過程吧！一開始建立一個新的 form 表單，它會是一組的 group form 後面加上! 是 Typescript 2.0 的 non-null 可參考

09.13

Angular Reactive Form 表單

表單在實作上是件常見的的處理，為什麼會寫這篇呢？實在是因為我太容易忘了 XD 還記得一開始接觸到表單操控時， Angular reactive form 的官方文件它雖然寫的很清楚，但對於當時剛趟入 Angular 領域的我還是看的一頭霧水，尤其是在 for

01.17

Angular Angular library

如何將 Angular library 裡的 scss/sass 正確導出

因專案越來越龐大，需要將一些共用元件抽出來做 library 放到 npm 上，在其他專案在開發時也能一起使用，以便節省開發時間。照著官網的教學建立: https://angular.tw/guide/creating-libraries 建立完後將所需

2020

12.27

Angular viewchild undefined with ngIf

當 angular 裡的範本變數裡使用到 ngIf，在執行範本變數的時後會報錯，出現 undefined，無法操控程式碼如下 html component 使用 ngIf 時，一開始執行 ngOnInit，這個 dom 是不存在的，所以去操控這個 dom

11.03

Angular HttpParams

這篇記錄著關於如何使用 Angular HttpParams 且 HttpParams 接收的參數值必定要轉為字串才可以在 service.ts 引入以上是基本的傳參數方式，然而 Angular 提供了一些方法讓我們使用若參數已存在則後面會取代前面或

10.20

Angular Router 筆記

在 app.module.ts 引入 RouterModule ps.注意：路徑不包含斜線 Route Guards 路由守衛預設導址網址 http://localhost:4200/list/網址變數 routing.module ts 設定網址連結 (

09.26

Angular error

Reactive Forms in Angular Disabled Warning ( 響應式表單 Disabled Warning )

當我們在使用 Angular Reactive Forms 時如用到 disable 時 console 會噴出以下警告訊息 Angular 官方是建議在 ts 檔裡處理，但某些時後在 html 裡處理會比在 ts 裡處理還要來的簡潔便利如：有時後

09.13

Angular life

Angular Router Change 踩雷日記

最近在專案上出現了一個，點導址按鈕導頁後，出現 api 重覆打的情形而且還是在特定會在 side bar 點了才會出現這 bug 奇怪了，之前做的都沒遇過這問題呀，寫的方式也都是一樣花了好多間找問題點怎麼找都找不到找過 router, reslover

05.03

Angular Pipe (管道)

在 Angular 裡用來做一個簡單的數據轉換這次做的是數值對應 ASCII Table 對照表在 terminal 裡鍵入建立一個新的 pipe pipe.ts 在 module.ts 引入 html ts

2019

07.21

Angular 動態載入組件

情境：tab 切換 app.module.ts component.html component.ts 新增預載入的component 另一種做法可以使用 if else 來做

07.20

Angular 組件傳值

一張圖說明 input 與 output 值的互相傳遞透過 setter 截聽輸入屬性值的變化把需要傳遞的 data 存到 service 裡然後再到 service 裡存取需要用的值分別建立一個 list 跟 detail 的 compontent l

07.17