angular assign different observable to template with async based on condition (any memory leak ?)
up vote
3
down vote
favorite
I need to render data from different ngrx stores based on some flag. Both stores gives same type of data.
Approach 1
<ng-contaier *ngIf="flag$ | async; else anotherStoreData">
<ng-container *ngIf="store1$ | async as store1">
<div> store1?.prop1 </div>
<div> store1?.prop2 </div>
</ng-container>
</ng-contaier>
<ng-template #anotherStoreData>
<ng-container *ngIf="store2$ | async as store2">
<div> store2?.prop1 </div>
<div> store2?.prop2 </div>
</ng-container>
</ng-template>
flag$: Observable<boolean>
store1$: Observable<Store>
store2$: Observable<Store>
ngInit()
flag$ = streamService.userNewStore();
store1$ = this.store.select(<someselector1>);
store2$ = this.store.select(<someselector2>);
Approach 2
<ng-container *ngIf="store$ | async as store">
<div> store?.prop1 </div>
<div> store?.prop2 </div>
</ng-container>
store$: Observable<Store>
ngInit()
streamService.userNewStore()
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe((flag) =>
store$ = flag ? this.store.select(<someselector1>) : this.store.select(<someselector2>);
);
In Approach1 I am duplicating template, which is fine for small template - but if it is big then i am thinking about Approach 2.
In Approach2 streamService can change the flag at any time, in that case what will happen to the previous subscription in the template with async pipe. Will it lead any memory leak?
Is there any other alternatives that I can use, please suggest.
javascript angular ngrx angular-observable ngrx-store-4.0
add a comment |
up vote
3
down vote
favorite
I need to render data from different ngrx stores based on some flag. Both stores gives same type of data.
Approach 1
<ng-contaier *ngIf="flag$ | async; else anotherStoreData">
<ng-container *ngIf="store1$ | async as store1">
<div> store1?.prop1 </div>
<div> store1?.prop2 </div>
</ng-container>
</ng-contaier>
<ng-template #anotherStoreData>
<ng-container *ngIf="store2$ | async as store2">
<div> store2?.prop1 </div>
<div> store2?.prop2 </div>
</ng-container>
</ng-template>
flag$: Observable<boolean>
store1$: Observable<Store>
store2$: Observable<Store>
ngInit()
flag$ = streamService.userNewStore();
store1$ = this.store.select(<someselector1>);
store2$ = this.store.select(<someselector2>);
Approach 2
<ng-container *ngIf="store$ | async as store">
<div> store?.prop1 </div>
<div> store?.prop2 </div>
</ng-container>
store$: Observable<Store>
ngInit()
streamService.userNewStore()
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe((flag) =>
store$ = flag ? this.store.select(<someselector1>) : this.store.select(<someselector2>);
);
In Approach1 I am duplicating template, which is fine for small template - but if it is big then i am thinking about Approach 2.
In Approach2 streamService can change the flag at any time, in that case what will happen to the previous subscription in the template with async pipe. Will it lead any memory leak?
Is there any other alternatives that I can use, please suggest.
javascript angular ngrx angular-observable ngrx-store-4.0
add a comment |
up vote
3
down vote
favorite
up vote
3
down vote
favorite
I need to render data from different ngrx stores based on some flag. Both stores gives same type of data.
Approach 1
<ng-contaier *ngIf="flag$ | async; else anotherStoreData">
<ng-container *ngIf="store1$ | async as store1">
<div> store1?.prop1 </div>
<div> store1?.prop2 </div>
</ng-container>
</ng-contaier>
<ng-template #anotherStoreData>
<ng-container *ngIf="store2$ | async as store2">
<div> store2?.prop1 </div>
<div> store2?.prop2 </div>
</ng-container>
</ng-template>
flag$: Observable<boolean>
store1$: Observable<Store>
store2$: Observable<Store>
ngInit()
flag$ = streamService.userNewStore();
store1$ = this.store.select(<someselector1>);
store2$ = this.store.select(<someselector2>);
Approach 2
<ng-container *ngIf="store$ | async as store">
<div> store?.prop1 </div>
<div> store?.prop2 </div>
</ng-container>
store$: Observable<Store>
ngInit()
streamService.userNewStore()
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe((flag) =>
store$ = flag ? this.store.select(<someselector1>) : this.store.select(<someselector2>);
);
In Approach1 I am duplicating template, which is fine for small template - but if it is big then i am thinking about Approach 2.
In Approach2 streamService can change the flag at any time, in that case what will happen to the previous subscription in the template with async pipe. Will it lead any memory leak?
Is there any other alternatives that I can use, please suggest.
javascript angular ngrx angular-observable ngrx-store-4.0
I need to render data from different ngrx stores based on some flag. Both stores gives same type of data.
Approach 1
<ng-contaier *ngIf="flag$ | async; else anotherStoreData">
<ng-container *ngIf="store1$ | async as store1">
<div> store1?.prop1 </div>
<div> store1?.prop2 </div>
</ng-container>
</ng-contaier>
<ng-template #anotherStoreData>
<ng-container *ngIf="store2$ | async as store2">
<div> store2?.prop1 </div>
<div> store2?.prop2 </div>
</ng-container>
</ng-template>
flag$: Observable<boolean>
store1$: Observable<Store>
store2$: Observable<Store>
ngInit()
flag$ = streamService.userNewStore();
store1$ = this.store.select(<someselector1>);
store2$ = this.store.select(<someselector2>);
Approach 2
<ng-container *ngIf="store$ | async as store">
<div> store?.prop1 </div>
<div> store?.prop2 </div>
</ng-container>
store$: Observable<Store>
ngInit()
streamService.userNewStore()
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe((flag) =>
store$ = flag ? this.store.select(<someselector1>) : this.store.select(<someselector2>);
);
In Approach1 I am duplicating template, which is fine for small template - but if it is big then i am thinking about Approach 2.
In Approach2 streamService can change the flag at any time, in that case what will happen to the previous subscription in the template with async pipe. Will it lead any memory leak?
Is there any other alternatives that I can use, please suggest.
javascript angular ngrx angular-observable ngrx-store-4.0
javascript angular ngrx angular-observable ngrx-store-4.0
edited Nov 11 at 0:42
asked Nov 10 at 22:35
Dyapa Srikanth
69111350
69111350
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
4
down vote
accepted
Having just checked the source code for the Async pipe, it appears that it will unsubscribe if the Observable changes.
You can see this in line 100 of the file:
if (obj !== this._obj)
this._dispose();
return this.transform(obj as any);
If the value being passed in is not the one currently held in memory, it calls this.dispose
, which in turn unsubscribes.
With that in mind, I would definitely prefer the 2nd approach
1
Is this why I like stackoverflow ?
– Dyapa Srikanth
Nov 10 at 23:38
add a comment |
up vote
0
down vote
You can use the flag$
observable in a conditional operator to determine the data source:
<ng-container *ngIf="((flag$ | async) ? store1$ : store2$) | async as store">
<div> store?.prop1 </div>
<div> store?.prop2 </div>
</ng-container>
See this stackblitz for a demo.
@ConnersFan when it is switching from store1$ to store2$ will it unsubscribe store1$ - If yes, is there any difference in going with ngIf and ngOnInit on selecting store based on flag?
– Dyapa Srikanth
Nov 10 at 23:31
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
4
down vote
accepted
Having just checked the source code for the Async pipe, it appears that it will unsubscribe if the Observable changes.
You can see this in line 100 of the file:
if (obj !== this._obj)
this._dispose();
return this.transform(obj as any);
If the value being passed in is not the one currently held in memory, it calls this.dispose
, which in turn unsubscribes.
With that in mind, I would definitely prefer the 2nd approach
1
Is this why I like stackoverflow ?
– Dyapa Srikanth
Nov 10 at 23:38
add a comment |
up vote
4
down vote
accepted
Having just checked the source code for the Async pipe, it appears that it will unsubscribe if the Observable changes.
You can see this in line 100 of the file:
if (obj !== this._obj)
this._dispose();
return this.transform(obj as any);
If the value being passed in is not the one currently held in memory, it calls this.dispose
, which in turn unsubscribes.
With that in mind, I would definitely prefer the 2nd approach
1
Is this why I like stackoverflow ?
– Dyapa Srikanth
Nov 10 at 23:38
add a comment |
up vote
4
down vote
accepted
up vote
4
down vote
accepted
Having just checked the source code for the Async pipe, it appears that it will unsubscribe if the Observable changes.
You can see this in line 100 of the file:
if (obj !== this._obj)
this._dispose();
return this.transform(obj as any);
If the value being passed in is not the one currently held in memory, it calls this.dispose
, which in turn unsubscribes.
With that in mind, I would definitely prefer the 2nd approach
Having just checked the source code for the Async pipe, it appears that it will unsubscribe if the Observable changes.
You can see this in line 100 of the file:
if (obj !== this._obj)
this._dispose();
return this.transform(obj as any);
If the value being passed in is not the one currently held in memory, it calls this.dispose
, which in turn unsubscribes.
With that in mind, I would definitely prefer the 2nd approach
answered Nov 10 at 23:03
user184994
10.7k11526
10.7k11526
1
Is this why I like stackoverflow ?
– Dyapa Srikanth
Nov 10 at 23:38
add a comment |
1
Is this why I like stackoverflow ?
– Dyapa Srikanth
Nov 10 at 23:38
1
1
Is this why I like stackoverflow ?
– Dyapa Srikanth
Nov 10 at 23:38
Is this why I like stackoverflow ?
– Dyapa Srikanth
Nov 10 at 23:38
add a comment |
up vote
0
down vote
You can use the flag$
observable in a conditional operator to determine the data source:
<ng-container *ngIf="((flag$ | async) ? store1$ : store2$) | async as store">
<div> store?.prop1 </div>
<div> store?.prop2 </div>
</ng-container>
See this stackblitz for a demo.
@ConnersFan when it is switching from store1$ to store2$ will it unsubscribe store1$ - If yes, is there any difference in going with ngIf and ngOnInit on selecting store based on flag?
– Dyapa Srikanth
Nov 10 at 23:31
add a comment |
up vote
0
down vote
You can use the flag$
observable in a conditional operator to determine the data source:
<ng-container *ngIf="((flag$ | async) ? store1$ : store2$) | async as store">
<div> store?.prop1 </div>
<div> store?.prop2 </div>
</ng-container>
See this stackblitz for a demo.
@ConnersFan when it is switching from store1$ to store2$ will it unsubscribe store1$ - If yes, is there any difference in going with ngIf and ngOnInit on selecting store based on flag?
– Dyapa Srikanth
Nov 10 at 23:31
add a comment |
up vote
0
down vote
up vote
0
down vote
You can use the flag$
observable in a conditional operator to determine the data source:
<ng-container *ngIf="((flag$ | async) ? store1$ : store2$) | async as store">
<div> store?.prop1 </div>
<div> store?.prop2 </div>
</ng-container>
See this stackblitz for a demo.
You can use the flag$
observable in a conditional operator to determine the data source:
<ng-container *ngIf="((flag$ | async) ? store1$ : store2$) | async as store">
<div> store?.prop1 </div>
<div> store?.prop2 </div>
</ng-container>
See this stackblitz for a demo.
answered Nov 10 at 23:15
ConnorsFan
28.1k42457
28.1k42457
@ConnersFan when it is switching from store1$ to store2$ will it unsubscribe store1$ - If yes, is there any difference in going with ngIf and ngOnInit on selecting store based on flag?
– Dyapa Srikanth
Nov 10 at 23:31
add a comment |
@ConnersFan when it is switching from store1$ to store2$ will it unsubscribe store1$ - If yes, is there any difference in going with ngIf and ngOnInit on selecting store based on flag?
– Dyapa Srikanth
Nov 10 at 23:31
@ConnersFan when it is switching from store1$ to store2$ will it unsubscribe store1$ - If yes, is there any difference in going with ngIf and ngOnInit on selecting store based on flag?
– Dyapa Srikanth
Nov 10 at 23:31
@ConnersFan when it is switching from store1$ to store2$ will it unsubscribe store1$ - If yes, is there any difference in going with ngIf and ngOnInit on selecting store based on flag?
– Dyapa Srikanth
Nov 10 at 23:31
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53244100%2fangular-assign-different-observable-to-template-with-async-based-on-condition-a%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown