deploy: 3f77334

assets/blog/angular-two-way-binding-using-signals-model.md

@@ -0,0 +1,77 @@
+---
+title: "使用 Signal Model Input 輕鬆達成 two way binding"
+date: 2024-02-15 20:17:46
+category: "Angular 大師之路"
+tags:
+  - "Angular"
+  - "Angular 17.2.0"
+---
+
+Angular 自從 17 推出 Signals 後，就持續改進，從 17.1 的 Signal Input 到現在最新的 Model Input，讓開發者可以更輕鬆的達成 two way binding！今天就來看看如何使用透過 Signal Model Input 來達成 two way binding 吧！
+
+<!-- more -->
+
+過去的文章我們已經介紹過兩種 two way binding 的方法，一種是使用[實作 control value accessor](https://fullstackladder.dev/blog/2018/10/23/mastering-angular-08-customize-form-control/)，這種方法雖然麻煩，但可以享受到完整的 Angular 表單支援；[另外一種](https://fullstackladder.dev/blog/2018/10/22/mastering-angular-07-simple-two-way-binding/)是實做一組 `xxxx` 的 `@Input` 屬性，以及另外一個 `xxxxChange` 的 `@Output` 事件，雖然無法支援 Angular 表單，但確實一個簡單的 two way binding 實作。
+
+現在我們來看看如何透過 Angular 最新的 model 來達成 two way binding 吧！
+
+```typescript
+@Component({
+  selector: 'app-counter',
+  standalone: true,
+  template: `
+    <div>
+      <button (click)="decrement()">-</button>
+      <span>{{ counter() }}</span>
+      <button (click)="increment()">+</button>
+    </div>
+  `
+})
+export class CounterComponent {
+  counter = model(0);
+
+  increment() {
+    this.counter.update(counter => counter  + 1);
+  }
+
+  decrement() {
+    this.counter.update(counter => counter - 1);
+  }
+}
+```
+
+這樣就完成了一個簡單的計數器元件，並且透過 model 來達成 two way binding，是不是非常簡單呢？
+
+使用方式也很容易，只要在父元件中使用 `[(counter)]` 就可以了：
+
+```typescript
+@Component({
+  selector: 'app-root',
+  template: `
+    <app-counter [(counter)]="counter"></app-counter>
+    <div>{{ counter }}</div>
+  `
+})
+export class AppComponent {
+  counter = 0;
+}
+```
+
+這是單純宣告一個屬性的方式，除此之外，也支援使用 `signal`:
+
+```typescript
+counter = signal(0);
+```
+
+同時，也能支援直接使用 `model`
+
+```typescript
+counter = model(0);
+```
+
+一個 `model` 就能輕易達成過去要宣告兩個屬性的方式，真的是太方便啦！
+
+## 參考資源
+
+- [Angular v17.2 is now available](https://blog.angular.io/angular-v17-2-is-now-available-596cbe96242d)
+- [model](https://angular.dev/api/core/model?tab=usage-notes)

atom.xml

@@ -4,11 +4,19 @@
         <title>全端開發人員天梯</title>
         <link>https://fullstackladder.dev/</link>
         <description>軟體開發學不完，就像爬不完的天梯，只好多紀錄寫筆記</description>
-        <lastBuildDate>Sat, 17 Feb 2024 13:29:33 GMT</lastBuildDate>
+        <lastBuildDate>Sun, 18 Feb 2024 12:44:43 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>zh</language>
         <copyright>All rights reserved 2021, Mike Huang</copyright>
+        <item>
+            <title><![CDATA[使用 Signal Model Input 輕鬆達成 two way binding]]></title>
+            <link>https://fullstackladder.dev/blog/2024/02/15/angular-two-way-binding-using-signals-model</link>
+            <guid>https://fullstackladder.dev/blog/2024/02/15/angular-two-way-binding-using-signals-model</guid>
+            <pubDate>Thu, 15 Feb 2024 20:17:46 GMT</pubDate>
+            <description><![CDATA[<p>Angular 自從 17 推出 Signals 後，就持續改進，從 17.1 的 Signal Input 到現在最新的 Model Input，讓開發者可以更輕鬆的達成 two way binding！今天就來看看如何使用透過 Signal Model Input 來達成 two way binding 吧！</p>
+]]></description>
+        </item>
         <item>
             <title><![CDATA[如何測試使用 OnPush 策略的 Angular 元件]]></title>
             <link>https://fullstackladder.dev/blog/2023/10/08/how-to-unit-test-onpush-angular-component</link>
@@ -167,14 +175,6 @@
             <guid>https://fullstackladder.dev/blog/2022/12/24/introduction-security-code-scan</guid>
             <pubDate>Sat, 24 Dec 2022 13:34:32 GMT</pubDate>
             <description><![CDATA[<p><a href="https://security-code-scan.github.io/">Security Code Scan</a> 是一套針對 .NET 的程式碼靜態分析工具，他可以針對程式碼中的安全性問題進行掃描，並且提供了一些程式碼修正的建議。今天這篇文章就來介紹一下如何使用 Security Code Scan 來進行程式碼安全性掃描。</p>
-]]></description>
-        </item>
-        <item>
-            <title><![CDATA[[Azure DevOps] 透過 cache 加快 CI pipeline 速度]]></title>
-            <link>https://fullstackladder.dev/blog/2022/12/17/azure-devops-cache-build-pipeline</link>
-            <guid>https://fullstackladder.dev/blog/2022/12/17/azure-devops-cache-build-pipeline</guid>
-            <pubDate>Sat, 17 Dec 2022 12:04:50 GMT</pubDate>
-            <description><![CDATA[<p>在 CI 階段時，我們經常會需要針對專案內容安裝各種套件，不過其實套件內容也很少更動，但每次安裝都會花上不少時間，雖然都放著讓 CI 跑就好了，但還是免不了要等一段時間，好在 Azure DevOps 提供了 <a href="https://learn.microsoft.com/en-us/azure/devops/pipelines/release/caching?view=azure-devops&wt.mc_id=DT-MVP-5003734">Pipeline caching</a> 功能，讓我們可以將套件內容先暫存起來，下次就不用再安裝了，加快 CI pipline 的速度，這篇文章就來介紹一下 Pipeline caching 的工能。</p>
 ]]></description>
         </item>
     </channel>