鐵人檔案
這個系列將紀錄剛轉換職場的 Angular 新手，從零開始學習 Angular 的過程。內容會涵蓋環境建置、基礎語法、元件開發、路由、服務、API 串接、表單處理等核心主題，並分享每一天的學習心得與實作經驗。希望透過 30 天的練功日誌，快速掌握 Angular 的開發技巧，也能幫助同樣是新手的你！
今天要介紹在模板中，如何使用 switch 條件語句來控制顯示的內容。目前主要有兩種寫法： @switch 語法 ( Angular 17+ ) 使用舊版的...
今天介紹使用迴圈語句來顯示列表內容，可以快速生成多個相似的元素。目前有兩種語法： @for ( Angular 17+ ) 舊版的 *ngFor @fo...
今天要介紹在 Angular 中，如何使用 input 函式以及 @Input 裝飾器來傳入父元件的資料。 在開發過程中，經常會出現巢狀元件的情況，例如：待辦清...
今天要介紹在 Angular 中，如何使用 output 函式以及 @Output 裝飾器來實現元件之間的事件傳遞。 在巢狀元件使用情況下，通常會使用提升的方式...
今天要介紹 Angular 的雙向綁定如何實現在實務情況下，經常會想要取得使用者輸入的值，並且在畫面上顯示這些值。這時候雙向綁定就派上用場了。 雙向綁定的語法...
今天會介紹一些在模板中的常見的用法，包含：模板參考變數、ng-template 模板參考變數 在 Angular 中，元素上加上 #name 是用來宣告模板參考...
今天會接續介紹一些在模板中的常見的用法 ng-container ng-container 適合用於不需要額外容器元素的場景。 邏輯分組容器，不會產生額外的...
在前面篇章中，有介紹 input/output 與父子元件溝通的方式，但在實際應用中，會遇到需要多個元件共享資料或邏輯的情況，而一但需要跨越兩個元件以上，inp...
今天會介紹元件的生命週期，從建立到銷毀之間發生的一系列步驟。每個步驟代表 Angular 渲染元件並隨時間檢查元件更新過程的不同部分。 若需要在特定時間點執行邏...
指令是指在 Angular 應用程式中，可以改變元素的設定、樣式及添加附加行為的類別，所以我們前面提到的元件本質上也是一種指令，只是帶有模板和樣式。而不含模板的...
