How to come back to a component from another without reloading the component in angular?

Question

I have a component in angular containing multiple child component. It also has logic for hiding and showing component on the basis of condition within that component. eg.

 <div *ngFor="let data of dataSource; let i=index">
 <child-component [dataOne]="data.one"></child-component>
 <mat-divider></mat-divider>
 <second-child-component [dataTwo]="data.two"></second-child-component>
 </div>

I want to implement the functionality of navigating back without the page refresh and back to position where it previously was.

I did it by injecting the Location in constructor and using the back() method of it. However it reinitialize the previous component.

How do I do that? Any help would be much appreciated. Thanks!

Answer 1

If by returing the same place you mean scroll there, you can use something like this:

  scroll(el: HTMLElement) {
    el.scrollIntoView();
  }

and see more in this post

If you don't want to render the data again, you can try to hide this with CSS Or

moving out of the screen with position: absolute and bottom:-10000

or

display: None