{"id":756,"date":"2023-04-07T05:00:00","date_gmt":"2023-04-07T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=756"},"modified":"2023-04-05T15:23:02","modified_gmt":"2023-04-05T22:23:02","slug":"rxjs-startwith-operator","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-startwith-operator\/","title":{"rendered":"RxJs startWith operator"},"content":{"rendered":"\n<p><code><a href=\"https:\/\/rxjs.dev\/api\/operators\/startWith\" target=\"_blank\" rel=\"noopener\" title=\"\">startWith<\/a><\/code> is an operator that does something straightforward: It takes an existing Observable and makes it emit a default value immediately.<\/p>\n\n\n\n<p>Its <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-learn-more-about-rxjs-operators\/\" target=\"_blank\" rel=\"noopener\" title=\"\">marble diagram<\/a> looks like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"998\" height=\"298\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-9.png\" alt=\"\" class=\"wp-image-757\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-9.png 998w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-9-300x90.png 300w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-9-768x229.png 768w\" sizes=\"auto, (max-width: 998px) 100vw, 998px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>What are some everyday use cases for <code>startWith<\/code>? Here is an example where I want to display a loader while data is being loaded from a service:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"402\" height=\"96\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-10.png\" alt=\"\" class=\"wp-image-758\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-10.png 402w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/image-10-300x72.png 300w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The <code>loading<\/code> property is used to decide when to show\/hide a loader. This observable would first emit <code>{&nbsp;data:&nbsp;null,&nbsp;loading:&nbsp;true&nbsp;}<\/code> then the actual data with  <code>loading: false<\/code>.<\/p>\n\n\n\n<p>You can see the complete <a href=\"https:\/\/stackblitz.com\/edit\/angular-xfjdnx?file=src%2Fmain.ts,src%2Fdata.service.ts\" target=\"_blank\" rel=\"noopener\" title=\"\">example here on Stackblitz<\/a> ( I had fun with Typescript, the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/async-pipe-syntax-tricks\/\" target=\"_blank\" rel=\"noopener\" title=\"\">async pipe<\/a>,  and generics in that example, too).<\/p>\n\n\n\n<p>A more complex example in this tutorial is <a href=\"https:\/\/blog.angulartraining.com\/dynamic-filtering-with-rxjs-and-angular-forms-a-tutorial-6daa3c44076a\" target=\"_blank\" rel=\"noopener\" title=\"\">Dynamic filtering with RxJs and Angular forms<\/a>. I describe how to create a text input used to filter a list of states as follows:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"704\" height=\"315\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/04\/1_EPdpOZmNUo97Sz_DlfpRpA.gif\" alt=\"\" class=\"wp-image-762\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>We need <code>startWith<\/code> in that scenario to start the filtering feature before the user has typed anything in the text input. That&#8217;s one of the most common use cases for the <code>startWith<\/code> operator.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>startWith is an operator that does something straightforward: It takes an existing Observable and makes it emit a default value immediately. Its marble diagram looks like this: What are some everyday use cases for startWith? Here is an example where I want to display a loader while data is being loaded from a service: The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,10],"tags":[],"class_list":["post-756","post","type-post","status-publish","format-standard","hentry","category-operators","category-rxjs"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=756"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/756\/revisions"}],"predecessor-version":[{"id":764,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/756\/revisions\/764"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=756"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=756"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}