CODEWITHSUNDEEP
angular
POV
POV

Reputation: 12015

How to keep the latest state of Angular components?

I have several others inserted in the main component:

<app-tools * ngIf = "type === 'A'"> </app-tools>
<app-history * ngIf = "type === 'B'> </app-history>
<app-layers * ngIf = "type === 'C'> </app-layers>
<app-objects * ngIf = "type === 'D'> </app-objects>

All of them are activated by the condition *ngif

When the user activates the <app-history> </<app-history> component and does some work in it, after it leaves the component, switching to another one.

Then, upon returning to the component, it is initialized again.

How to save the last state in the visited Angular component without using [hidden], because in this case a lot of memory is allocated for loading unclaimed components?

Upvotes: 0

Views: 3660

Answers (5)

Gaurang Dhorda
Gaurang Dhorda

Reputation: 3387

Complete Working Demo on StackBlitz

Here, simple you can use shared singleton service with @Input() and @Ouput() parent child component architecture. I am taking consideration of history component only. First You have one 1. Container Component which is parent of component used for communicating to service only. and rest all are child component which are only receiving and sending input and output using @Input() and @Output().

HTML is of Container Component is...

   <div class="form-group col-2 m-1 card d-flex alert-secondary  justify-content-around">
     <div class="card-body justify-content-around d-flex">
       <input class="form-check-input" #b [(ngModel)]= "ab" type="checkbox" id="b"> 
       <label for="b"> B </label>
   </div>

  <div class="card m-1  col-12 col-md-3 alert-secondary " *ngIf="b.checked">
     <app-history class="card-body" [stateHistory]="getHistoryState()" 
           (stateUpdate)="historyStateUpdate($event)" >
     </app-history>
  </div>

In <app-history> class we have one [stateHistory] as aInput and one (stateUpdaate) as a Output.

Your containerComponent.ts

In this component class we inject state-service using DI of angular.

  constructor(private stateService: StateService) { }

getHistoryState(){
  return this.stateService.historyState;
}

historyStateUpdate(event){ 
  this.stateService.historyState = event;
  this.saved = true;
  this.saveNotification();
}
saveNotification(){
  setTimeout(() => {
     this.saved = false;
  }, 2000);
}

Further you can scale here to use rxjs as per your required need.

Upvotes: 1

Ankit Kaushik
Ankit Kaushik

Reputation: 29

You can make use two way data-binding and have your state passed through the parent of app-history or whatever. Just be careful about naming your input and output properties of childComponent i.e it should always have "Change" appended to its output corresponding property. Something like:

@Input() x;
@Output() xChange = new EventEmitter();

<div>
 <app-history *ngIf = "type === 'B'" [(myState)]="historyState"></app-history> 
</div>

AppHistoryComponent {
@Input() myState;
@Output() myStateChange = new EventEmitter();

changeMyState(newState) {
 this.myStateChange.emit(newState);
}
}

In this way you will always have your state their in your ParentComponent's historyState property

Upvotes: 1

this is yash
this is yash

Reputation: 533

You can use [hide] property of angular instead of *ngIf. Doing so you are keeping all the components in the dom but displaying only the current active component by which you will not lose the component state even if it is not displayed.

<app-tools   [hide] = "type !== 'A'"> </app-tools>
<app-history [hide] = "type !== 'B'> </app-history>
<app-layers  [hide] = "type !== 'C'> </app-layers>
<app-objects [hide] = "type !== 'D'> </app-objects>

Upvotes: 1

Paul
Paul

Reputation: 478

It sounds like you need a state store of some kind to persist the data changes. NgRx is one solution. If you don’t want to use another library you can create your own state service where you would have behavior subjects defined in the service. When you make a change within the tab, you would execute the next method on the subject variable, passing in the data changes as the parameter to the method call. Within the component, you can can access the current value of the subject by ‘.value’ on the subject. Hope this helps.

Upvotes: 1

uminder
uminder

Reputation: 26150

You should create your own class that implements RouteReuseStrategy. It caches all or chosen components and prevents them from being re-created from scratch again and again. As an example you may have a look at AppRouteReuseStrategy.

Please note that the class needs to be registered as a provider in app.module.ts.

providers: [
    { provide: RouteReuseStrategy, useClass: AppRouteReuseStrategy },

Upvotes: 0

Related Questions