├── CONTRIBUTING.md ├── README.md ├── assets ├── angular-logo.png └── rxjs-logo.png └── contents └── masters ├── Alex_Inkin ├── README.md └── assets │ ├── alex_inkin_tip_1.jpg │ ├── alex_inkin_tip_10.jpg │ ├── alex_inkin_tip_11.1.jpg │ ├── alex_inkin_tip_11.2.jpg │ ├── alex_inkin_tip_12.1.jpg │ ├── alex_inkin_tip_12.2.jpg │ ├── alex_inkin_tip_13.1.jpg │ ├── alex_inkin_tip_13.2.jpg │ ├── alex_inkin_tip_13.3.jpg │ ├── alex_inkin_tip_14.jpg │ ├── alex_inkin_tip_15.jpg │ ├── alex_inkin_tip_16.jpg │ ├── alex_inkin_tip_17.1.jpg │ ├── alex_inkin_tip_17.2.jpg │ ├── alex_inkin_tip_18.jpg │ ├── alex_inkin_tip_19.jpg │ ├── alex_inkin_tip_2.jpg │ ├── alex_inkin_tip_20.jpg │ ├── alex_inkin_tip_21.jpg │ ├── alex_inkin_tip_22.jpg │ ├── alex_inkin_tip_23.jpg │ ├── alex_inkin_tip_24.jpg │ ├── alex_inkin_tip_25.1.jpg │ ├── alex_inkin_tip_25.2.jpg │ ├── alex_inkin_tip_25.3.jpg │ ├── alex_inkin_tip_25.4.jpg │ ├── alex_inkin_tip_26.jpg │ ├── alex_inkin_tip_27.jpg │ ├── alex_inkin_tip_3.jpg │ ├── alex_inkin_tip_4.1.jpg │ ├── alex_inkin_tip_4.2.jpg │ ├── alex_inkin_tip_5.1.jpg │ ├── alex_inkin_tip_5.2.jpg │ ├── alex_inkin_tip_6.1.jpg │ ├── alex_inkin_tip_6.2.jpg │ ├── alex_inkin_tip_7.jpg │ ├── alex_inkin_tip_8.1.jpg │ ├── alex_inkin_tip_8.2.jpg │ └── alex_inkin_tip_9.jpg └── Roman_Sedov ├── README.md └── assets ├── roman_sedov_1.jpg ├── roman_sedov_10.1.jpg ├── roman_sedov_10.2.jpg ├── roman_sedov_11.jpg ├── roman_sedov_12.jpg ├── roman_sedov_13.jpg ├── roman_sedov_14.jpg ├── roman_sedov_15.1.jpg ├── roman_sedov_15.2.jpg ├── roman_sedov_16.jpg ├── roman_sedov_17.jpg ├── roman_sedov_18.jpg ├── roman_sedov_19.jpg ├── roman_sedov_2.jpg ├── roman_sedov_20.jpg ├── roman_sedov_21.jpg ├── roman_sedov_22.jpg ├── roman_sedov_23.jpg ├── roman_sedov_24.jpg ├── roman_sedov_25.jpg ├── roman_sedov_26.jpg ├── roman_sedov_3.jpg ├── roman_sedov_4.jpg ├── roman_sedov_5.jpg ├── roman_sedov_6.1.jpg ├── roman_sedov_6.2.jpg ├── roman_sedov_7.jpg ├── roman_sedov_8.jpg └── roman_sedov_9.jpg /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | When contributing non-trivial changes to this repository, please first discuss the change you wish to make by creating a pull request in this repository or just create a issue. 4 | 5 | ### Submitting new Tips and Best practises 6 | 7 | 1. Create a folder with master name in Pascal Case (ex: Aliex_Inkin) 8 | 2. Inside master name folder create another folder assets to add all code snippets and a README.md file. 9 | 10 | Master_Name > Assets , README.md 11 | 3. In README.md of Master_Name folder create a header with master name and add the tip in following template 12 | 13 | content | values 14 | ------- | ------ 15 | Tip | #Tip no 16 | Description | Description of the tip 17 | stackblitz | Stackblitz url 18 | Read more | Read more url 19 | 20 | Below the table add the code snippets. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Angular and RxJS Tips

2 | Collection of tips and best practices by masters of Angular and rxjs 3 | 4 | ![](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/assets/angular-logo.png)![](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/assets/rxjs-logo.png) 5 | 6 |
7 | Angular and RxJS has lot of great developers, they post lots of tips and best practices. This repo is attempt to bring all those tips collection in one place. 8 |
9 | 10 | Master No | Name | Twitter handle | Tips Url 11 | ----------| -----|----------------|--------- 12 | 1 | Alex Inkin | @Waterplea | https://github.com/sksaifuddin/angular-rxjs-tips/tree/master/contents/masters/Alex_Inkin 13 | 2 | Roman Sedov | @marsibarsi | https://github.com/sksaifuddin/angular-rxjs-tips/tree/master/contents/masters/Roman_Sedov 14 | 15 |
16 | 17 | ## Whose Tips can be added ? 18 | 19 | Any one who is good with Angular and Rxjs tips can be added here. If anytime you come across a good tip or best practice anywhere on Internet can add here. You can add your tips if you have any :) 20 | 21 |
22 | 23 | ### Contributing Guide 24 | 25 | Read our [contributing guide](/CONTRIBUTING.md) to learn about how you can contribute tips and best practices, how you can suggest improvments. 26 | 27 | -------------------------------------------------------------------------------- /assets/angular-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/assets/angular-logo.png -------------------------------------------------------------------------------- /assets/rxjs-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/assets/rxjs-logo.png -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/README.md: -------------------------------------------------------------------------------- 1 |

Alex Inkin Tips

2 | 3 | content | values 4 | ------- | ------ 5 | Tip | #1 6 | Description | Like declaring async results with *ngIf="(stream$ \| async) as result" but need to support falsy values? Here's a simple #angular directive that does just that! Thumbs up 7 | stackblitz | https://stackblitz.com/edit/angular-tip-nglet 8 | Read more | 9 | 10 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_1.jpg) 11 |
12 | 13 | content | values 14 | ------- | ------ 15 | Tip | #2 16 | Description | You can use 'inject' method from ' @angular / core' in the context of a factory function to reach for type-safe dependencies for #angular injectable. 17 | stackblitz | 18 | Read more | https://angular.io/api/core/inject 19 | 20 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_2.jpg) 21 |
22 | 23 | content | values 24 | ------- | ------ 25 | Tip | #3 26 | Description | Augment static #TypeScript checks with runtime assertions for logically incorrect values with proper types. The earlier you catch an issue in your #angular app — the easier it is to fix! 27 | stackblitz | 28 | Read more | 29 | 30 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_3.jpg) 31 |
32 | 33 | content | values 34 | ------- | ------ 35 | Tip | #4 36 | Description | Protect your #angular components from illegal but properly typed inputs with assertion #TypeScript decorator 37 | stackblitz | https://stackblitz.com/edit/angular-assertion-decorator?file=src/app/assert.decorator.ts 38 | Read more | 39 | 40 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_4.1.jpg) 41 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_4.2.jpg) 42 |
43 | 44 | content | values 45 | ------- | ------ 46 | Tip | #5 47 | Description | Manage NgZone in your #RxJS streams to avoid extra ticks in you #Angular app with these 2 simple operators 48 | stackblitz | https://stackblitz.com/edit/angular-zone-free-stream?file=src%2Fapp%2Fzone.operators.ts 49 | Read more | 50 | 51 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_5.1.jpg) 52 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_5.2.jpg) 53 |
54 | 55 | content | values 56 | ------- | ------ 57 | Tip | #6 58 | Description | Ever needed to get #HTML element behind your #Angular component with a template reference variable? Write a simple directive to expose it! 59 | stackblitz | 60 | Read more | 61 | 62 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_6.1.jpg) 63 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_6.2.jpg) 64 |
65 | 66 | content | values 67 | ------- | ------ 68 | Tip | #7 69 | Description | Metadata decorators in #Angular support multidimensional arrays. You do not need to spread! 70 | stackblitz | 71 | Read more | 72 | 73 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_7.jpg) 74 |
75 | 76 | content | values 77 | ------- | ------ 78 | Tip | #8 79 | Description | Create a simple #RxJs Observable service to encapsulate destruction logic of your #Angular components and directives 80 | stackblitz | 81 | Read more | 82 | 83 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_8.1.jpg) 84 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_8.2.jpg) 85 |
86 | 87 | content | values 88 | ------- | ------ 89 | Tip | #9 90 | Description | Did you know toArray method of #Angular QueryList creates a copy? Here's a small snippet to get underlying array so your getters won't suffer in performance!Right-pointing double triangle 91 | stackblitz | 92 | Read more | 93 | 94 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_9.jpg) 95 |
96 | 97 | content | values 98 | ------- | ------ 99 | Tip | #10 100 | Description | If you decorate your abstract class, #Angular will resolve constructor parameters and you do not need to add constructor to concrete implementation!Building construction 101 | stackblitz | 102 | Read more | 103 | 104 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_10.jpg) 105 |
106 | 107 | content | values 108 | ------- | ------ 109 | Tip | #11 110 | Description | You cannot inject #Angular renderer into global service. But if you really really need to, you can! Create a token to get default oneToolbox 111 | stackblitz | 112 | Read more | 113 | 114 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_11.1.jpg) 115 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_11.2.jpg) 116 |
117 | 118 | content | values 119 | ------- | ------ 120 | Tip | #12 121 | Description | Ever needed your #angular directives to have styles? Create styles service using token from my last tweet 122 | stackblitz | 123 | Read more | 124 | 125 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_12.1.jpg) 126 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_12.2.jpg) 127 |
128 | 129 | content | values 130 | ------- | ------ 131 | Tip | #13 132 | Description | How do you color icons with #CSS? You don't need an icon font or #HTML inlining if you prepare your #SVG. You can even create an #Angular component!Artist palette 133 | stackblitz | https://stackblitz.com/edit/angular-colored-svg 134 | Read more | https://medium.com/its-tinkoff/natively-colored-svg-icons-e08ae1ea7d01 135 | 136 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_13.1.jpg) 137 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_13.2.jpg) 138 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_13.3.jpg) 139 |
140 | 141 | content | values 142 | ------- | ------ 143 | Tip | #14 144 | Description | You can have your *ngFor / *ngIf on a parent element but your :enter/:leave #Angular animations on a child. To enable :leave for children just add this animation to the parent 145 | stackblitz | 146 | Read more | 147 | 148 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_14.jpg) 149 |
150 | 151 | content | values 152 | ------- | ------ 153 | Tip | #15 154 | Description | Improve #accessibility of your #Angular app by properly handling indeterminate state of checkboxes with a directive! 155 | stackblitz | https://stackblitz.com/edit/angular-checked-directive 156 | Read more | 157 | 158 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_15.jpg) 159 |
160 | 161 | content | values 162 | ------- | ------ 163 | Tip | #16 164 | Description | Support digits screen keyboard even on old iOS with a simple #Angular directiveRed apple 165 | stackblitz | https://stackblitz.com/edit/angular-inputmode 166 | Read more | 167 | 168 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_16.jpg) 169 |
170 | 171 | content | values 172 | ------- | ------ 173 | Tip | #17 174 | Description | Tired of typecasting event target or defining event type for #RxJS method 'fromEvent'? Add custom type and a typed wrapper function!Direct hit 175 | stackblitz | https://stackblitz.com/edit/angular-typed-fromevent 176 | Read more | 177 | 178 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_17.1.jpg) 179 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_17.2.jpg) 180 |
181 | 182 | content | values 183 | ------- | ------ 184 | Tip | #18 185 | Description | Don't use routerLink on buttons. It breaks semantics & forces same tab. Instead, make your button component target both buttons + linksLink symbol 186 | stackblitz | https://stackblitz.com/edit/angular-button-a 187 | Read more | 188 | 189 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_18.jpg) 190 |
191 | 192 | content | values 193 | ------- | ------ 194 | Tip | #19 195 | Description | Create #Angular validator to check validity of entered card number with Luhn algorithm 196 | stackblitz | 197 | Read more | 198 | 199 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_19.jpg) 200 |
201 | 202 | content | values 203 | ------- | ------ 204 | Tip | #20 205 | Description | Read files as ArrayBuffers the #RxJS way 206 | stackblitz | 207 | Read more | 208 | 209 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_20.jpg) 210 |
211 | 212 | content | values 213 | ------- | ------ 214 | Tip | #21 215 | Description | Did you know that operators in #RxJS receive index, just like native array functions? No need for scan to count emits 216 | stackblitz | 217 | Read more | 218 | 219 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_21.jpg) 220 |
221 | 222 | content | values 223 | ------- | ------ 224 | Tip | #22 225 | Description | You can use NaN as lack of value and stay within number type. No need to introduce null and 0 is a valid value, even though falsy 226 | stackblitz | 227 | Read more | 228 | 229 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_22.jpg) 230 |
231 | 232 | content | values 233 | ------- | ------ 234 | Tip | #23 235 | Description | Create a shared requestAnimationFrame-based #RxJS Observable to use across your #Angular app, or just use our opensource library of tokens for native APIs 236 | stackblitz | 237 | Read more | https://github.com/ng-web-apis/common 238 | 239 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_23.jpg) 240 |
241 | 242 | content | values 243 | ------- | ------ 244 | Tip | #24 245 | Description | Create an #Angular directive to know when routerLinkActive becomes active or otherwise. Initial delay is needed because by the time directive initializes navigation events have already passed and routerLinkActive only updates in ngAfterContentInit 246 | stackblitz | 247 | Read more | 248 | 249 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_24.jpg) 250 |
251 | 252 | content | values 253 | ------- | ------ 254 | Tip | #25 255 | Description | Learn how to differentiate regular scroll from momentum scroll in your #Angular app on mobile with #RxJS 256 | stackblitz | https://stackblitz.com/edit/angular-momentum-scroll 257 | Read more | 258 | 259 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_25.1.jpg) 260 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_25.2.jpg) 261 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_25.3.jpg) 262 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_25.4.jpg) 263 |
264 | 265 | content | values 266 | ------- | ------ 267 | Tip | #26 268 | Description | Create a simple #RxJS stream to quickly reload your #Angular componen 269 | stackblitz | 270 | Read more | 271 | 272 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_26.jpg) 273 |
274 | 275 | content | values 276 | ------- | ------ 277 | Tip | #27 278 | Description | When creating customizable #Angular components, think in terms of content and context, not in terms of templates, functions, literals. Check out my #opensource project that acts as interpolation, template & component outlet 279 | stackblitz | 280 | Read more | https://medium.com/angular-in-depth/agnostic-components-in-angular-2427923b742d , https://github.com/TinkoffCreditSystems/ng-polymorpheus 281 | 282 | ![alex_inkin_tip_1](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Alex_Inkin/assets/alex_inkin_tip_27.jpg) 283 |
284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_1.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_10.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_11.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_11.1.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_11.2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_11.2.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_12.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_12.1.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_12.2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_12.2.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_13.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_13.1.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_13.2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_13.2.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_13.3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_13.3.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_14.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_15.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_16.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_17.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_17.1.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_17.2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_17.2.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_18.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_19.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_2.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_20.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_21.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_22.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_23.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_24.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_25.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_25.1.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_25.2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_25.2.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_25.3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_25.3.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_25.4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_25.4.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_26.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_27.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_27.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_3.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_4.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_4.1.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_4.2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_4.2.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_5.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_5.1.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_5.2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_5.2.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_6.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_6.1.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_6.2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_6.2.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_7.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_8.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_8.1.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_8.2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_8.2.jpg -------------------------------------------------------------------------------- /contents/masters/Alex_Inkin/assets/alex_inkin_tip_9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Alex_Inkin/assets/alex_inkin_tip_9.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/README.md: -------------------------------------------------------------------------------- 1 |

Roman Sedov Tips

2 | 3 | content | values 4 | ------- | ------ 5 | Tip | #1 6 | Description | You can write a simple operator function to mark your view for a check when stream emitting 7 | stackblitz | 8 | Read more | 9 | 10 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_1.jpg) 11 |
12 | 13 | content | values 14 | ------- | ------ 15 | Tip | #2 16 | Description | Make your component or directive more compact with the “outputs” field in a decorator.Note: helps with injected HostBinding too 17 | stackblitz | 18 | Read more | 19 | 20 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_2.jpg) 21 |
22 | 23 | content | values 24 | ------- | ------ 25 | Tip | #3 26 | Description | You can turn your #angular AbstractControl / AbstractControlDirective valueChanges into ReplaySubject(1) with a simple wrapper 27 | stackblitz | 28 | Read more | 29 | 30 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_3.jpg) 31 |
32 | 33 | content | values 34 | ------- | ------ 35 | Tip | #4 36 | Description | You can use all #angular DI decorators when creating a token value with a factory. Just wrap it into an array and add decorators before the token 37 | stackblitz | 38 | Read more | 39 | 40 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_4.jpg) 41 |
42 | 43 | content | values 44 | ------- | ------ 45 | Tip | #5 46 | Description | console.log can be a simple and quick way to check how many entities are created. Do not forget about preventing console.log commit in your ESLint / TSLint 47 | stackblitz | 48 | Read more | 49 | 50 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_5.jpg) 51 |
52 | 53 | content | values 54 | ------- | ------ 55 | Tip | #6 56 | Description | You can make an #angular directive similar to ngFor but using a number of repetitions rather than an array.It can save your time creating calendars, pagination or anything else you need to repeat a certain number of times 57 | stackblitz | https://stackblitz.com/edit/repeat-times-directive 58 | Read more | 59 | 60 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_6.1.jpg) 61 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_6.2.jpg) 62 |
63 | 64 | content | values 65 | ------- | ------ 66 | Tip | #7 67 | Description | Make a simple #angular mapper pipe that transforms value in a template with pure functions. Here is a well-typed sample by me.This way Angular runs change detection only when mapper parameters have changed 68 | stackblitz | https://stackblitz.com/edit/mapper-pipe?file=src%2Fapp%2Fmapper.pipe.ts 69 | Read more | 70 | 71 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_7.jpg) 72 |
73 | 74 | content | values 75 | ------- | ------ 76 | Tip | #8 77 | Description | You can make a util function to recursively mark your #angular controls as touched and check its validity. It works with a simple Control, FormArray and FormGroup as well 78 | stackblitz | 79 | Read more | 80 | 81 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_8.jpg) 82 |
83 | 84 | content | values 85 | ------- | ------ 86 | Tip | #9 87 | Description | You can create a simple function to filter null and undefined value in #RxJS stream and narrow down its type correctly 88 | stackblitz | 89 | Read more | 90 | 91 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_9.jpg) 92 |
93 | 94 | content | values 95 | ------- | ------ 96 | Tip | #10 97 | Description | You can make a simple #angular pipe to filter values in a template with pure functions.Angular runs change detection only when pipe parameters have changed. 98 | stackblitz | https://stackblitz.com/edit/filter-pipe-ng?file=src%2Fapp%2Fapp.component.html 99 | Read more | 100 | 101 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_10.1.jpg) 102 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_10.2.jpg) 103 |
104 | 105 | content | values 106 | ------- | ------ 107 | Tip | #11 108 | Description | You can make a constant with an empty query to avoid additional checks working with @ContentChildren and @ViewChildren.Be attentive listening to "changes" field that you have the actual version of query 109 | stackblitz | 110 | Read more | 111 | 112 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_11.jpg) 113 |
114 | 115 | content | values 116 | ------- | ------ 117 | Tip | #12 118 | Description | You can make an #angular directive for focusing elements in the moment of their appearance 119 | stackblitz | https://stackblitz.com/edit/autofocus-directive?file=src%2Fapp%2Fapp.component.html 120 | Read more | 121 | 122 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_12.jpg) 123 |
124 | 125 | content | values 126 | ------- | ------ 127 | Tip | #13 128 | Description | You can make an #angular structural directive for adding content only if the user has High DPI display.It is convenient to use with video or picture sources. 129 | stackblitz | 130 | Read more | 131 | 132 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_13.jpg) 133 |
134 | 135 | content | values 136 | ------- | ------ 137 | Tip | #14 138 | Description | You can make an #RxJS operator function to prevent unnecessary backend requests when it is possible to calculate items locally.It is good to use with filter pipe 139 | stackblitz | https://stackblitz.com/edit/angular-smart-search?file=src%2Fapp%2Fapp.component.ts 140 | Read more | 141 | 142 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_14.jpg) 143 |
144 | 145 | content | values 146 | ------- | ------ 147 | Tip | #15 148 | Description | You can make an #angular directive to manage your DOM element focusing: with a mouse, with a keyboard, both or none 149 | stackblitz | https://stackblitz.com/edit/angular-focusable-directive?file=src%2Fapp%2Fapp.component.html 150 | Read more | 151 | 152 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_15.1.jpg) 153 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_15.2.jpg) 154 |
155 | 156 | content | values 157 | ------- | ------ 158 | Tip | #16 159 | Description | Do not forget that your #angular services can extend Observable. It is just a class 160 | stackblitz | 161 | Read more | https://medium.com/its-tinkoff/service-as-observable-29ce7fa9085b 162 | 163 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_16.jpg) 164 |
165 | 166 | content | values 167 | ------- | ------ 168 | Tip | #17 169 | Description | You can tokenize global objects to use them with #angular Dependency Injection. It allows you to make your entities more abstract and easy to replace and test. 170 | stackblitz | 171 | Read more | 172 | 173 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_17.jpg) 174 |
175 | 176 | content | values 177 | ------- | ------ 178 | Tip | #18 179 | Description | If you use tokens to provide global values in #angular, you can also stub them in SSR. 180 | stackblitz | 181 | Read more | 182 | 183 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_18.jpg) 184 |
185 | 186 | content | values 187 | ------- | ------ 188 | Tip | #19 189 | Description | You can use "new Observable(...)" to make wrappers around native entities like XHR to use it in #angular.Look at the sample of service to cache static requests using this approach 190 | stackblitz | 191 | Read more | 192 | 193 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_19.jpg) 194 |
195 | 196 | content | values 197 | ------- | ------ 198 | Tip | #20 199 | Description | rxjs has "endWith" operator. It emits given value on stream completion 200 | stackblitz | 201 | Read more | 202 | 203 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_20.jpg) 204 |
205 | 206 | content | values 207 | ------- | ------ 208 | Tip | #21 209 | Description | Do you know the difference between "scan" and "reduce" operators in #rxjs? Scan: accumulates and emits a current accumulator after each source emit.Reduce: accumulates and emits a single value only after source complete. 210 | stackblitz | 211 | Read more | 212 | 213 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_21.jpg) 214 |
215 | 216 | content | values 217 | ------- | ------ 218 | Tip | #22 219 | Description | If you need to show error for a few seconds, you can write a simple #rxjs stream. 220 | stackblitz | https://stackblitz.com/edit/rxjs-error-showing?file=src%2Fapp%2Fapp.component.html 221 | Read more | 222 | 223 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_22.jpg) 224 |
225 | 226 | content | values 227 | ------- | ------ 228 | Tip | #23 229 | Description | rxjs has many useful details, do not forget to check all parameters of rxjs operators.For example, did you know that you can use your own "compare" function into distinctUntilChanged operator? 230 | stackblitz | 231 | Read more | 232 | 233 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_23.jpg) 234 |
235 | 236 | content | values 237 | ------- | ------ 238 | Tip | #24 239 | Description | Do you know the difference between first() and take(1) in #rxjs? first relais the first element or emits an error,take(1) returns an empty collection if there are no items.You can pass predicate function into first().first == take(1).single() 240 | stackblitz | 241 | Read more | 242 | 243 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_24.jpg) 244 |
245 | 246 | content | values 247 | ------- | ------ 248 | Tip | #25 249 | Description | Do you know "defaultIfEmpty" operator? It emits default value if source completes without having emitted any value. 250 | stackblitz | 251 | Read more | 252 | 253 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_25.jpg) 254 |
255 | 256 | content | values 257 | ------- | ------ 258 | Tip | #26 259 | Description | it is a good practice to make subjects private in public API and to provide an observable for class users.You can use .pipe() instead of .asObservable(). The result is the same but .pipe() is more easy to expand in the future. 260 | stackblitz | 261 | Read more | 262 | 263 | ![roman_sedov_tip](https://github.com/sksaifuddin/angular-rxjs-tips/blob/master/contents/masters/Roman_Sedov/assets/roman_sedov_26.jpg) 264 |
265 | 266 | -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_1.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_10.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_10.1.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_10.2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_10.2.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_11.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_12.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_13.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_14.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_15.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_15.1.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_15.2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_15.2.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_16.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_17.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_18.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_19.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_2.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_20.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_21.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_21.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_22.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_23.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_23.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_24.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_24.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_25.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_25.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_26.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_26.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_3.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_4.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_5.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_6.1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_6.1.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_6.2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_6.2.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_7.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_8.jpg -------------------------------------------------------------------------------- /contents/masters/Roman_Sedov/assets/roman_sedov_9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sksaifuddin/angular-rxjs-tips/4ace75d8e9a5b487174789cf15c435b2d198210c/contents/masters/Roman_Sedov/assets/roman_sedov_9.jpg --------------------------------------------------------------------------------