{"id":839,"date":"2023-04-21T05:00:00","date_gmt":"2023-04-21T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=839"},"modified":"2023-04-19T17:54:04","modified_gmt":"2023-04-20T00:54:04","slug":"rxjs-takeuntil-and-takewhile-operators","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/rxjs-takeuntil-and-takewhile-operators\/","title":{"rendered":"RxJs takeUntil and takeWhile operators"},"content":{"rendered":"\n

Our Rxjs operators of the week are takeUntil<\/code><\/a> and takeWhile<\/a><\/code>. These operators are the opposite of skipWhile<\/a><\/code> covered last week: They let the values from the source Observable pass through until a condition is met.<\/p>\n\n\n\n

takeUntil<\/code> is based on a second Observable and stops emitting values when that second Observable emits for the first time, as illustrated in this marble diagram<\/a>:<\/p>\n\n\n

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

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

takeWhile<\/code> is very similar but uses a predicate instead of an Observable to decide when to stop emitting from the source Observable:<\/p>\n\n\n\n

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

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

The primary use case for takeUntil<\/code> with Angular is to automate unsubscriptions from Observables, even though I recommend less verbose approaches to automating unsubscriptions<\/a>, such as using the async pipe<\/a> :<\/p>\n\n\n

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

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

The above code uses a subject<\/a> to emit a value when the component gets destroyed, thanks to the ngOnDestroy lifecycle hook. Then, that same subject is used by takeUntil<\/code> to complete the source Observable.<\/p>\n\n\n\n

Here is a different example of takeUntil<\/code> in action on Stackblitz<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Our Rxjs operators of the week are takeUntil and takeWhile. These operators are the opposite of skipWhile covered last week: They let the values from the source Observable pass through until a condition is met. takeUntil is based on a second Observable and stops emitting values when that second Observable emits for the first time, […]<\/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-839","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\/839","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=839"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/839\/revisions"}],"predecessor-version":[{"id":845,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/839\/revisions\/845"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}