https://github.com/everduin94/forked-async-pipe-tester

Forked the Angular async-pipe and added components to simulate various scenarios
https://github.com/everduin94/forked-async-pipe-tester

angular rxjs typescript

Last synced: about 2 months ago
JSON representation

Forked the Angular async-pipe and added components to simulate various scenarios

• Host: GitHub
• URL: https://github.com/everduin94/forked-async-pipe-tester
• Owner: Everduin94
• Created: 2019-06-01T20:25:42.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-30T10:05:04.000Z (about 2 years ago)
• Last Synced: 2023-03-03T18:42:44.626Z (almost 2 years ago)
• Topics: angular, rxjs, typescript
• Language: TypeScript
• Size: 1.01 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# AsyncDeepDive

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.5.

Note, I forked the pipe from version 7, although I don't believe it's changed since significantly version 6.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

**Important**:

- Run in production mode so that you do not see duplicate output on each change-detection cycle.

- app.component.html contains each component. The application is significantly easier to follow

if you comment out the other components and look at them one at a time.

- some of the logging is relevant/not-relevant based on the component you're testing. Thus, some of the log statements are commented out.

## Article

- https://medium.com/@erxk_verduin/angular-rxjs-async-pipe-deep-dive-2510b56f793a

## Code

*src/app/intro*: Looks at creation (component and container), destruction, completion, and reassignment when using async pipe.

*src/app/combine*: leverages combineLatest and a single async pipe

*src/app/dirty*: uses multiple async pipes for one observable

*src/app/clean*: uses a single async pipe for one observable

*src/app/toggle*: creation / destruction of a container