{"id":994,"date":"2023-05-25T05:00:00","date_gmt":"2023-05-25T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=994"},"modified":"2023-05-18T15:18:32","modified_gmt":"2023-05-18T22:18:32","slug":"signals-computed","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/signals-computed\/","title":{"rendered":"Signals: computed()"},"content":{"rendered":"\n

After introducing how to create Signals<\/a> and how to update them<\/a>, let’s take a look at one more exciting feature that helps replace the need for RxJs Observables.<\/p>\n\n\n\n

How to emit a new Signal value when one or more Signals get updated?<\/strong> That’s what computed()<\/a><\/code> does. In my Signals course<\/a>, I illustrate computed()<\/code> with the following example:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

In the above code, this.rates()<\/code> and this.currency()<\/code> are two different Signals. this.rates()<\/code> emits up-to-date exchange rates for all currencies in the world. this.currency()<\/code> emits the current currency selected by the user.<\/p>\n\n\n\n

<\/p>\n\n\n\n

computed()<\/code> takes a function as a parameter. The function returns the computed value from my two Signals; in this case, the up-to-date exchange rate for the current currency. If the exchange rates or the currency get updated, this computed Signal will emit an updated value automatically.<\/p>\n\n\n\n

This is somewhat similar to combining several Observables and using switchMap<\/a><\/code> or combineLatest<\/a><\/code> to get a customized result. It’s a lot easier with Signals (one line of code!).<\/p>\n","protected":false},"excerpt":{"rendered":"

After introducing how to create Signals and how to update them, let’s take a look at one more exciting feature that helps replace the need for RxJs Observables. How to emit a new Signal value when one or more Signals get updated? That’s what computed() does. In my Signals course, I illustrate computed() with the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,29],"tags":[],"class_list":["post-994","post","type-post","status-publish","format-standard","hentry","category-angular","category-signals"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t