RxJS–Unsubscribe automatically –part 47

I am searching for a simple method to unsubscribe from Observables. Some of methods are detailed here : https://blog.bitsrc.io/6-ways-to-unsubscribe-from-observables-in-angular-ab912819a78f

I do not want

  1. remember to unsubscribe
  2. being forced to use html ( the async pipe)
  3. take operator – I want later to cache first data and then make the http call
  4. first operator – same with 3
  5. decorator – seems ok.
  6. tsLint – no, can be easy to disable

 

So Decorator it is. More reading

https://www.typescriptlang.org/docs/handbook/decorators.html

https://netbasal.com/automagically-unsubscribe-in-angular-4487e9853a88

Added code the autoUnsub

export function AutoUnsub( constructor ) {

const original = constructor.prototype.ngOnDestroy;

console.log(‘from unsubscribe’);

constructor.prototype.ngOnDestroy = function() {

// tslint:disable-next-line: forin

for ( const prop in this ) {

const property = this[ prop ];

if ( property && (typeof property.unsubscribe === ‘function’) ) {

console.log(‘unsubscribe !’);

property.unsubscribe();

}

}

console.log(‘finish unsub’);

// tslint:disable-next-line: no-unused-expression

original && typeof original === ‘function’ && original.apply(this, arguments);

};

}

Modified code to make property of unsubscribe, e.g. from

this.banksService.GetBanksIds().subscribe(

it=>{

console.log(it.length);

this.banks=it;

},

err=> window.alert(“error:”+ JSON.stringify(err))

)

}

to

banksObs: Observable<string[]>;

//ommitted code

this.banksObs = this.banksService.GetBanksIds();

this.banksObs.subscribe(

it => {

console.log(it.length);

this.banks = it;

},

err => window.alert(‘error:’ + JSON.stringify(err))

);

Created also a new component, for programmers, in order to observe the unsubscribe moving from component to component,

See commit https://github.com/ignatandrei/InfoValutar/commit/66e358848652ce761cb6ef2d69a460f052b12e09

Infovalutar

And one hour passes...
(This is the result of 1 hour per day auto-challenge as a full cycle developer for an exchange rates application)
( You can see the sources at https://github.com/ignatandrei/InfoValutar/ )
NrPost 
1Start
2Reading NBR from internet
3Source control and build
4Badge and test
5CI and action
6Artifacts and dotnet try
7Docker with .NET Try
8ECB
9Intermezzo - Various implementations for programmers
10Intermezzo - similar code - options
11Plugin implementation
12GUI for console
13WebAPI
14Plugin in .NET Core 3
15Build and Versioning
16Add swagger
17Docker - first part
18Docker - second part
19Docker - build Azure
20Pipeline send to Docker Hub
21Play with Docker - online
22Run VSCode and Docker
23Deploy Azure
24VSCode see tests and powershell
25Code Coverage
26Database in Azure
27Sql In Memory or Azure
28Azure ConString, RSS
29Middleware for backward compatibility
30Identical Tables in EFCore
31Multiple Data in EFCore
32Dot net try again
33Start Azure Function
34Azure function - deploy
35Solving my problems
36IAsyncEnumerable transformed to IEnumerable and making Azure Functions works
37Azure functions - final
38Review of 37 hours
39Last Commit in AzureDevOps
40Create Angular WebSite
41Add static Angular to WebAPI .NET Core
42Docker for Angular
43Angular and CORS
44SSL , VSCode, Docker
45Routing in Angular
46RxJS for Routing
47RxJs Unsubscribe