iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

Angular10 實作教學 系列

TypeScript 型別 - ENUM轉陣列(2)
圖片顯示 + 檔案上傳(1)
每條 API 添加 欄位(1)
Angular Material 日期使用(3)
Angular Material 替換色系(1)
資料傳遞處理 - @Input@Output 、Storage、Subject、Router(4)
重新整理再次取得資料(1)
Reactive Form 多層使用 + 驗證(4)
使用 leaflet 建構地圖(3)
圖表使用(3)

鐵人鍊成 | 共 30 篇文章 | 9 人訂閱 訂閱系列文 RSS系列文
DAY 1

NG10鐵人賽 - 1 - Angular Material 日期使用(1) - 原生安裝

步驟一、 安裝套件 cmd ng add @angular/material 安裝途中會詢問下列問題 要哪種 css 顏色配置? 若選擇額外客製化顏色參考下...

2020-09-01 ‧ 由 馬達 分享
DAY 2

NG10鐵人賽 - 2 - Angular Material 日期使用(2) - 安裝 OwlDateTime

說明 日期比較麻煩就是有時候還需要 時和分,因此選擇使用 OwlDateTime DEMO https://danielykpan.github.io/date...

2020-09-02 ‧ 由 馬達 分享
DAY 3

NG10鐵人賽 - 3 - Angular Material 日期使用(3) - 日曆常用功能

一、一般點擊 Icon 顯示日曆 html <!-- [owlDateTime] 將 dt2 日曆的值綁定到 input 的 value --> &...

2020-09-03 ‧ 由 馬達 分享
DAY 4

NG10鐵人賽 - 4 - Angular Material 日期使用(4) - 日期範圍選取;過濾選取日期

功能一、 日期範圍選擇,兩個輸入框 需要先 Import FormsModule html <input name="dateForm&quot...

2020-09-04 ‧ 由 馬達 分享
DAY 5

NG10鐵人賽 - 5 - Angular Material 日期使用(5) - 選擇日期並限制下一個日期的選擇

選擇開始日期,限制結束日期的選擇日期 html <input [owlDateTime]="dt2" placeholder=&quo...

2020-09-05 ‧ 由 馬達 分享
DAY 6

NG10鐵人賽 - 6 - 添加 API 的 Request Header 欄位

添加Key到每條 API 的Request Header api-header-interceptor.ts headersConfig['token'] 可以...

2020-09-06 ‧ 由 馬達 分享
DAY 7

NG10鐵人賽 - 7 - 型別介紹 - interface、class、enum

簡介 TypeScript 最重要的就是定義型別,好處就是有 intellisense (智能感知),只要把物件寫出來 「.」後面就有選項可以直接選擇,既方便又...

2020-09-07 ‧ 由 馬達 分享
DAY 8

NG10鐵人賽 - 8 - 型別介紹 - type

type 功能一、定義純文字 ts AnimalStrings 是 型別 export enum AnimalEnum { Dog, Cat, Pi...

2020-09-08 ‧ 由 馬達 分享
DAY 9

NG10鐵人賽 - 9 - 型別實作(1) - 物件實體化實作

建立 型別到 物件化出物件,並執行功能 animal.model.ts // export 可以讓其他 ts 檔案去引用 // void 是不回傳值的型別 ex...

2020-09-09 ‧ 由 馬達 分享
DAY 10

NG10鐵人賽 - 10 - 型別實作(2) - enum 轉陣列實作

animal.model.ts enum AnimalEnum { Dog, Cat, Tiger } ts const animal...

2020-09-10 ‧ 由 馬達 分享