使用 Angular 安裝 TailwindCSS
Angular 14.2.3 Node 14.16.1 編輯器 vscode 寫這篇文章的時後，所安裝的是 TailwindCSS v3 版本 以下將是 TailwindCSS v3 版介紹 在根目錄底下會多出一支 tailwind.config.js 所有
標籤：Angular
2022
Angular Window Resize Event (偵測視窗縮放事件)
偶然發現 Angular 有蠻多種方式可以偵到一些視窗事件，順手記錄下來 在 subscribe 前 可再多做些設定，當 resize 時，不用一直觸發，300ms 偵測一次就好
Angular ControlValueAccessor (客製表單控制項)
當需要做 component 裡的表單特定值的連動，就會 ControlValueAccessor 就是不可或缺的要件 建立新的 component 透過 implements ControlValueAccessor 達到表單值與不同 component 間
在 Angular 文章裡幫程式碼加上語法高亮 (highlight)
create highlight.service 在 styles.scss 引入 (可選自己喜歡的樣式引入) Themes https://highlightjs.org/static/demo/ prismjs 不只提供了 higtlight 樣式，也提供
使用 RXJS 取消 http request
因為需求，有時後需要取消處理中的 http request 所以就來做個筆記吧 模擬另一種情境，比如說在 ngrx 裡處理，這裡寫的很簡略，只寫了方法，但沒有 ngrx 的寫法
2021
如何使用 Github Actions 自動部署 Angular 到 Github Pages
Github 多了一個 Actions 的新功能，當 push 檔案到 Github 的時後，就會自動跑 CI/CD 部署 這個功能真是太方便啦!!! Angular 有提供了一個 Deploy 的功能 這次選用了 angular-cli-ghpages 加入
Angular Providers
一直以來對 Angular Providers 這部份都還是有存在著半知半解的狀態，就趁著這次機會一次搞懂它吧！ Providers 提供了四種注入方式 Class Provider : useClass Value Provider: useValue Fa
如何在 Angular 獲取 URL 資訊
在實作裡，很多時後我們會將一些必要資訊記錄在網址上，直接在網址裡就能得到我們要的訊息 不用再透過組件將資訊層層傳遞，達到解耦合的效果。 註：一切一切 都只是我用來舉例，不代表為鐵人賽網址真正的實際規劃哦！ 例如：我的鐵人賽主題網址為 https://ithel
如何在 Angular 建立 Breadcrumb (麵包屑)
麵包屑 為提供網站裡的導航，讓使用者容易了解當下所在的位置 剛好也呼應前一天使用 router 的部份 現在位置：首頁 / 列表 / 內容 Angular 裡的 router 架構 通常會命名為 app-routing.module.ts 這裡會需要帶點 rx
Angular 路由守衛(登入篇)
經過了昨天的介紹，今天就來看看使用登入範例囉 今天的登入資料依然是使用 FakeStoreAPI 這裡就做個簡單的驗証，沒填值就不能按按鈕 若是有成功得到 token 就裝這狀態記錄在 setToken$ 裡 在 canEnter 訂閱剛剛的 setToken
Angular 路由守衛
我們在開發的過程中，經常會遇到需要某些權限才能進入的頁面，這時後就會需要路由守衛的機制啦， 而它最常用在登入畫面時 Angular CLI 提供了命令列工具，可以快速建立路由守衛框架檔案： 或 官網介紹：guard 執行後，Angular CLI 會問我們需要
Angular 筆記 css 樣式篇
今天就只是個筆記，單純記錄寫法如何使用，以便自己日後查找，畢竟人非聖賢、會忘難免 XD 套用 className 變數為 isDark，value 必需為 boolean 在 html 的 dom 裡設定 https://angular.tw/api/comm
Angular 客製彈出視窗
因為我的這個 blog 需要一個彈出視窗做提示，而套件裡的樣式我都不喜歡，所以今天就來客製化一個吧！ 這次的彈出視窗會使用 Angular Material 裡的 cdk 來做開發 安裝 cdk 注意： 若發現 @angular/cdk 裡的某些功能不能掛載，
Angular ViewChild 與 ViewChildren 介紹
ViewChild 這個屬性在 Angular 是屬於很常用的一部份 今天就來了解一下 ViewChild 與 ViewChildren 的差別與使用方式吧！ HelloComponent 子組件 屬性裝飾器，用於配置一個檢視查詢。 變更檢測器會在檢視的 DO
如何在 Angular 取得當前頁面的絕對路徑
當有一個連結需要另開新頁時，在 develop 或 production 需要對應到正確的路徑 Angular 提供了這個方式 https://angular.tw/api/common/Locationprepareexternalurl 所以我就做了以下的
Angular 淺拷貝之日記文
又踩雷啦啊哈哈哈哈哈。 來重現一下遇到的情境吧 一開始建了一個 fruit 的物件，裡面有 apple 與 banana 這兩樣空物件 在 OnInit 時，賦予了 apple 與 banana 值 當我按下 button Click 的 時後， apple
使用 Angular 做檔案編碼檢測 (detect-encoding)
前一陣子，後端有個需求是在檔案上傳前，需要提前知道上傳的檔案編碼 是 UTF-8 或是 ascii 等，才能決定要不要將檔案放進資料庫，或是在這之前再做一次轉檔。 今天的內容跟 Angular 比較沒有關係，屬於套件分享，但因也是使用 Angular 實作，所
Angular 轉換 API 資料格式 (Adapter)
今天的內容屬於設計模式的一種。 當我們從後端接到資料後，有時後資料格式往往不是如我們所想，所以會再加工做個轉換的動作。 所以就要使用 TypeScript 來做個轉接器，轉成我們所需的資料！ 就拿前幾天的文章 Angular 如何取得 API 資料 繼續做介紹
Angular ElementRef、TemplateRef、viewContainerRef 的區別
今天就來聊聊 ElementRef、TemplateRef、viewContainerRef，者實說，在這之前一直都沒很認真搞懂這部份 就趁著這次機會一起來看看吧！ 用於檢視 HTML DOM 元素，可以在瀏覽器中取得 DOM 的原生 Element Elem
Angular ng-template 與 ngTemplateOutlet
ngTemplateOutlet 這裡我解釋為 ng-template 裡的插槽 來看看實際上會是如何使用 先來段程式碼，這裡為一筆物件資料 HTML ngTemplateOutlet 這個插槽的名字 我們取做 jsonData 在 ng-template 的
Angular ng-container 與 ng-template
接續昨天的範例。 今天要聊的是 ng-container 與 ng-template 上面程式碼所要表達的是，若是資料大於 0 筆，頁面上就會呈現列表，沒有資料的時後在畫面上顯示 No Data ng-container 在 Angular 的 templat
Angular ngIf 與 Async Pipe
當我們在 template 訂閱一組資料，而需要對它做一些邏輯處理的時後。 .ts .html 若像上述這樣的寫法，會造成重覆訂閱而增加 server 的負擔，所以在實作上，通常會避免這情況發生 將 html 寫法稍做修改 將 products$ async
Rxjs 各種解訂閱方式
昨天說到了將資料訂閱出來渲染在頁面上的事，那麼就就來說說 RxJs 解訂閱這件事吧。 這也是為了避免 memory leak，或重覆訂閱所造成的 BUG，若非有限訂閱，通常在訂閱離開後，都需要解訂閱。 只執行第一次，通常用於第一次進來讀取成功取得資料後，就不需
Angular 如何取得 API 資料
既然昨天已經說了 http post 這件事，那今天就來說說 http get 這部份吧！ 今天的資料依然使用 FakeStoreAPI 樣式套用 Angular Material 從 api 取得列表後，把資料渲染到 html 上 app.module.ts
Angular 如何將多筆資料上傳後，取得全部回傳資料，再送到另一支 API
來回顧一下前幾天的日記文 Angular 圖片上傳之...日記文 程式碼流程規劃之...日記文 與今天介紹的內容有關，如何將多筆資料上傳後，取得全部回傳資料後 再將其資料整理，送到另一支 API 這次將會使用 RxJS 來做處理 我有一筆訂單，裡面有許多的產品
Angular 下拉選單如何選定預設值
當表單送出後，資料庫會記錄送出後的值，下次再進來時，會需要重現上一次所填寫過的內容，這在實作上是很常遇到的事情。 原以為這是件很簡單的事，讀取資料後，直接把值填上後即可(我想得太簡單了)， 當實作時，卻怎麼樣也選不了預設值，後來發現在需要在 select 裡
Angular 冒泡事件
今天就來個說個在新手時期很常遇到，但卻不知為什麼會發生的問題 來看一下我們前幾天的表單範例，與圖上 console 的部份 在操控表單的時後，發現在點選新增欄位時，連submit 也一起被觸發了！ 這是怎麼一回事呢！！！，明明就沒有按送出呀！ 原來是 Java
Angular Reactive Forms 自訂表單驗証器
有表單 當然少不了驗証，這次的情境是 名字是必填欄位。 手機不一定會是必填，但填了後必須符合手機的格式，09 開頭 共 10 碼 來囉！！ 在這個 form 表單的下方 新增一個驗証方式，動態驗証就寫在 validator 這裡面 .ts 若是號碼填寫錯誤，把
Angular 圖片上傳之日記文
本來預定今天要發佈的文章延後了，今天要要來分享這一兩天的踩雷心路歷，花了一半天時間，連鐵人都沒時間寫，還好有一些些存檔 ! 這次公司專案需要做到圖片上傳這部份的處理，因這次的套件對於手動上傳沒有支援太多，所以需要自己處理這部份，接著就是一連串的踩雷過程...
Angular Reactive Form 表單 setValue 與 patchValue 差異
今天就來說說 setValue 與 patchValue 差異這部份吧 一開始不太能理解這 setValue 與 patchValue 到底差在哪裡(官網的說明讓我不是很懂，理解力太差了 XD)，不是一樣都是賦值給 form 嗎 這幾天在使用的過程中，踩了一些
Angular Reactive Form 響應式表單 (formArray)
昨天介紹了 formControl 如何使用 今天來介紹 formArray 這部份老實說花了我不少時間才懂 XD 今天要在表單裡加上喜好，喜好會有很多，所以我們來使用 formArray 處理，預設值先給它一個空陣列 ts 程式裡的 favorites 是一
Angular Reactive Form 響應式表單 (formControl)
昨天我們看了 一長串的表單使用範例 都是經過理解消化後所寫出來的 code ，那麼今天就來聊一聊消化的過程吧！ 一開始 建立一個新的 form 表單，它會是一組的 group form 後面加上! 是 Typescript 2.0 的 non-null 可參考
Angular Reactive Form 表單
表單在實作上是件常見的的處理，為什麼會寫這篇呢？實在是因為我太容易忘了 XD 還記得一開始接觸到表單操控時， Angular reactive form 的官方文件它雖然寫的很清楚，但對於當時剛趟入 Angular 領域的我 還是看的一頭霧水，尤其是在 for
Scully 新增留言系統
這次選定了 utterances 來當留言系統，它是使用 github issue 當成網站的留言系統 先前是使用 DISQUS 覺得不是很好用，所以趁著這次翻寫時 也一起換掉了 (雖說也沒什麼人會留言啦 哈哈哈) 先在 github 裡安裝 utteranc
Scully 佈署到 github
終於！用 scully 把先前的 Blog 翻寫完成了!!! 灑花～ 接著當然是要把頁面佈署到 github 讓其他人看到啦 不然也只能自己自 high XD 首先安裝 angular-cli-ghpages 輸入 ngh --version 可檢查本機是否已
如何將 Angular library 裡的 scss/sass 正確導出
因專案越來越龐大，需要將一些共用元件抽出來做 library 放到 npm 上，在其他專案在開 發時也能一起使用，以便節省開發時間。 照著官網的教學建立: https://angular.tw/guide/creating-libraries 建立完後 將所需
2020
Angular viewchild undefined with ngIf
當 angular 裡的 範本變數裡使用到 ngIf，在執行範本變數的時後會報錯，出現 undefined，無法操控 程式碼如下 html component 使用 ngIf 時，一開始執行 ngOnInit，這個 dom 是不存在的，所以去操控這個 dom
Angular HttpParams
這篇記錄著關於如何使用 Angular HttpParams 且 HttpParams 接收的參數值必定要轉為字串才可以 在 service.ts 引入 以上是基本的傳參數方式，然而 Angular 提供了一些方法讓我們使用 若參數已存在 則後面會取代前面 或
Angular Router 筆記
在 app.module.ts 引入 RouterModule ps.注意：路徑不包含斜線 Route Guards 路由守衛 預設導址 網址 http://localhost:4200/list/網址變數 routing.module ts 設定網址連結 (
初探 Scully 建立 blog
原本就是寫 Angular 框架的我，最近得知 Scully 屬 Angular 的靜態頁面產生器，激起了 我的好奇心所以開始了以下路程 官方文件：https://scully.io/ 使用環境 先建立一個新的 ng 專案 新增 Scully 註：安裝完後 需
Reactive Forms in Angular Disabled Warning ( 響應式表單 Disabled Warning )
當我們在使用 Angular Reactive Forms 時 如 用到 disable 時 console 會噴出以下警告訊息 Angular 官方是建議在 ts 檔裡處理，但某些時後 在 html 裡處理會比在 ts 裡處理還要來的簡潔 便利 如： 有時後
Angular Router Change 踩雷日記
最近在專案上出現了一個，點導址按鈕導頁後，出現 api 重覆打的情形 而且還是在特定會在 side bar 點了才會出現這 bug 奇怪了，之前做的都沒遇過這問題呀，寫的方式也都是一樣 花了好多間找問題點 怎麼找都找不到 找過 router, reslover
Angular Pipe (管道)
在 Angular 裡用來做一個簡單的數據轉換 這次做的是數值對應 ASCII Table 對照表 在 terminal 裡鍵入 建立一個新的 pipe pipe.ts 在 module.ts 引入 html ts
2019
更改 ag-grid 資料欄位顯示 ( ag-grid component )
在 gridOptions 加上 frameworkComponents 在相對應的 columnDefs 裡設定 自訂義組件 或 DEMO: angularag-gridcomponent
修改 Material Expansion Panel (手風琴) 標題高度
因為 Material Expansion Panel 展開後的高度是使用動畫高度產生 所以 css 設定過後 仍會被蓋過 除非是下 !important 但在展開的過程中 會有先變高再縮回去的不順效果 在 Material 提供了我們兩個方式去設定 coll
使用 ag-grid 讀取 server 端分頁 ( Ag-grid server-side with paginated RESTful API and Angular )
先稍微介紹分頁會用到的 gridOptions 功能 rowBuffer: 0; //在網格呈現的可滾動可視區域外部呈現的行數。預設為 20 有一個緩衝區意味著當用戶緩慢地垂直滾動時，表格將準備顯示行。 rowSelection: 'multiple'; //
Angular 動態載入組件
情境：tab 切換 app.module.ts component.html component.ts 新增預載入的component 另一種做法可以使用 if else 來做
Angular 組件傳值
一張圖說明 input 與 output 值的互相傳遞 透過 setter 截聽輸入屬性值的變化 把需要傳遞的 data 存到 service 裡然後再到 service 裡存取需要用的值 分別建立一個 list 跟 detail 的 compontent l
Angular 繫結方式
Angular 共有四種資料繫結的方法 [property]='statement' (event)='someMethod($event)' [(ngModel)]='property' component.ts component.html app.mod