Now I want to cache data for fast loading site- if it comes next time with the same browser, should have some data returned fast – and then load from HTTP. So first return from cache, then make the request

So I need to create an HTTP interceptor to cache things-  fortunately, Angular already provide tutorial about this: https://angular.io/guide/http#intercepting-requests-and-responses  – see CachingInterceptor. And the question is how to return 2 results ( of the same type ) from the same function  ?  Fortunately, the answer is: Observable ! ( It took me a while to figure that intercept returns Observable …). Also, when making the http request, the code should also store the result for the next time.

So I need to combine the 2 observables, one from cache and one from HTTP result  – or I can use startWith ( to start with the value).

First, I wanted to put into a static dictionary ( key: url, value: value of the request) the data. It did not work. Why ? Because of this

static cache: Map<string, any> = new Map<string, any>();

//code for finding if we have something in the case

if (CachingInterceptor.cache.has(req.url)) {

//code to put into the cache

this.cache[req.url] = event.body; // Update the cache.

Can you spot the error ? ( Yes, I know: Dictionary in C# has tricked my mind)

Last line should be this:

CachingInterceptor.cache.set(url,event.body); // Update the cache.

Now the caching works – but only for local .  And only in memory .

You can find the commit at https://github.com/ignatandrei/InfoValutar/commit/2bde8130add59c84d11d7348ad0a88bb576e356a

Infovalutar

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

Now I want to have a separate URL for each bank, like  https://infovalutar.azurewebsites.net/bank/ECB

For this I read routing in Angular, https://angular.io/tutorial/toh-pt5 .

However , a small problem : when we change URL , from

https://infovalutar.azurewebsites.net/bank/ECB

to

https://infovalutar.azurewebsites.net/bank/BNR

we should re-load component – or the component be aware of changing.

Reading

https://kamranahmed.info/blog/2018/02/28/dealing-with-route-params-in-angular-5/

makes me change from

this.idBank = this.route.snapshot.paramMap.get(‘id’);

to

this.route.params.subscribe(rp=> {

this.idBank = rp.id;

}

    );

Seems little to do, but I have had problems with changing the router-outlet – figuring where to put it. The creation of dashboard component and the routes

const routes: Routes = [

{ path: ”, redirectTo: ‘/dashboard’, pathMatch: ‘full’ },

{ path: ‘dashboard’, component: DashboardComponent },

{path:’bank/:id’,component:BankComponent}

]

were enough trouble.

Infovalutar