https://tonny0531.github.io/tags/angualr/Recent content in Angualr onHugo -- gohugo.ioTue, 01 Aug 2023 14:40:21 +0900https://tonny0531.github.io/post/angular/inputkeyevent/Tue, 01 Aug 2023 14:40:21 +0900https://tonny0531.github.io/post/angular/inputkeyevent/Introduction I always forget how can i listen input event. So I write this post. Listening Event With out Angular With out Angular framework we have to use javascript to bind event like this code <input type="text" id="myInput"> document.getElementById('myInput').addEventListener('keyup', myInput); function myInput(input) { console.log(input.keyCode); } EventList KeyCodeRef SourceCode With Angular With Angular framework is more easier to bind event <input type="text" (keyup.enter)="onEnter()"> onEnter(): void { console.log("submit"); } SourceCode you can change another key like shift or anthoer you wanthttps://tonny0531.github.io/post/angular/keyvaluepipe/Mon, 15 Aug 2022 09:23:48 +0800https://tonny0531.github.io/post/angular/keyvaluepipe/前言 Angular 提供了相當於 Object.keys 的 Pipe 給大家使用，但有個細節卻常常被忽略 就是排序的行為，在官方預設會進行排序 舉例 預期的資料如下 創建中 取消或未過審 募資中 募資成功 募資失敗 在開發的過程中想像應該也會是一樣的顯示才對 但實質上會變成 創建中 募資失敗 募資中 募資成功 取消或未過審 可以看到其中兩筆順序已被對調 回頭去看官方的 Pipe 的用法說明 {{ input_expression | keyvalue [ : compareFn ] }} 後方會有 compareFn 可以注入 而固定回傳 0 就會變成原始資料了 SampleCode 參考資料 angular keyvalue pipe sort properties / iterate in order KevValuePipe