# 多奇 2020 年 2 月新人職前培訓班
###### tags: `Training` `Course`
[課程連結](https://github.com/changda0616/doggy-training-autocomplete-lesson)
### 課程議題
1. directive
* 結構型 - 更改 DOM 結構 ex: `NgIf`, `NgFor`, `NgSwitch`
* 屬性型 - 更改元素外觀或行為 ex: `NgStyle`, `NgClass`
* 元件型 - 含有樣板的 directive

2. 四種繫結方式
* 內嵌繫結 ( interpolation )

{{statement}}

* 屬性繫結 ( Property Binding )

[propertyName]="statement"
[attr.attributeName]="statement"

* 事件繫結 ( Event Binding )

(eventName)="someMethod($event)"
(eventName.key)="someMethod($event)"

* 雙向繫結 ( Two-way Binding )

[(ngModel)]='property'

3. 範本參考變數 - Template reference variables
以 `#name` 為例
* 在範本內建立一個名為 name 的區域變數
* 只能用於目前元件範本
* 儲存該標籤的 DOM 物件
* 「事件繫結」將任意 DOM 物件中的任意屬性傳回元件
4. 命名規則 - 動詞 + 名詞 with camelCase

---

### 步驟
- 增加 input 並綁定事件
- event binding
- rxjs fromEvent
- 範本參考變數
- [static 解釋](https://blog.kevinyang.net/2019/05/29/angular-static-viewchild/)
- 無綁定結構型 directive -> true
- 有綁定結構型 directive -> false 並在 `AfterViewInit` 取得 DOM
- 發出 http get, 拿到資料後更新資料
- 利用 ngFor 渲染 list 並編輯 css
- 增加上下鍵控制, 利用內建 keycode 屬性, 更新 activeIndex, 新增 li 的 ngclass
- 將屬性 inputValue 綁定 ngModel 按下 enter 更新 inputValue

---

### 回顧
1. 範本參考變數 scope
2. 發出 http get complete？
3. ngfor index 從幾開始？
4. ngmodelchange vs change

---

### 回家作業
1. 完成點擊更新 input 的邏輯
2. 讓下鍵移到超過最後一個選項時，回到第一個（上鍵反之）
3. 移除 keyup 事件並改用 `RxJS` 方式做監聽並嘗試觸發頻率的優化
4. 新增 `autocomplete` 元件，將部份 `app.component.ts` 的邏輯移植 ，讓其成為可重複使用的元件