{"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

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

Its marble diagram<\/a> looks like this:<\/p>\n\n\n

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

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

What are some everyday use cases for 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

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

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

The loading<\/code> property is used to decide when to show\/hide a loader. This observable would first emit { data: null, loading: true }<\/code> then the actual data with loading: false<\/code>.<\/p>\n\n\n\n

You can see the complete example here on Stackblitz<\/a> ( I had fun with Typescript, the async pipe<\/a>, and generics in that example, too).<\/p>\n\n\n\n

A more complex example in this tutorial is 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

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

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

We need startWith<\/code> in that scenario to start the filtering feature before the user has typed anything in the text input. That’s one of the most common use cases for the startWith<\/code> operator.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/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":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t