title: Prevent Angular to construct a new instance of a component when revisiting a route (Route Reuse Strategy)
body: <p>I have used the application in this <a href="https://github.com/techiediaries/angular7-router-demo" rel="nofollow noreferrer">GitHub repository</a> as a demonstration app for my angular routing problem. </p>
  
  <p>The application is working fine. Therefore, the application itself is not my focus as it is so simple, however you can access to its code completely if you want!</p>
  
  <p><strong>My problem is, that each time by navigation in this angular app, a new instance of the related component will be generated.</strong> </p>
  
  <p>I made a few changes in the code to illustrate this instantiation. I added a simple counter as follow: </p>
  
  <pre class="lang-js prettyprint-override"><code>export class ContactListComponent implements OnInit {
  
    contacts: any[] = [];
    counter = 0; //&lt;--- counter definition
  
    constructor(private contactService: ContactService) {
      console.log("List Component constructor: #" + ++this.counter); //&lt;--- usage #1
    }
  
    ngOnInit() {
      console.log("List Component ngInit: #" + ++this.counter); //&lt;--- usage #2
      this.contactService.getContacts().subscribe((data: any[]) =&gt; {
        this.contacts = data;
      });
    }
  }
  </code></pre>
  
  <p>If you look at the following figure, by each navigation that I did a new instance has been generated, therefore the counter each time will be reset and in the console it shows the <code>ngInit</code> and <code>constructor</code> has been called again and again:  </p>
  
  <p><a href="https://i.stack.imgur.com/b4Kwg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b4Kwg.jpg" alt="enter image description here"></a></p>
  
  <p>I even tried to navigate with the following snippet, and I got the same result!:</p>
  
  <pre><code>import { Router, ActivatedRoute } from '@angular/router';
  constructor(
          private router: Router
      ) { }
  
  this.router.navigate(['/contacts']);
  </code></pre>
  
  <p><strong>The question is how can I prevent this new instantiation!?</strong> </p>
  
  <p>Specially, when we navigate back from second page to the first page. 
  I am looking for a technique like a singleton that will instantiate the component only the first time that we visit a route and the other times that we visit that route, we get the same instant of the component.  </p>
  
  <p>Actually this app is not the main app that I am working on, my main problem is in other app that I used a <code>subscription technique</code> for sharing data and then when I have several instances of a component, the following code in different instances will be fired and result not as expected. Why? Because <code>if (this.agreeTerms)</code> will have different value in different instances at the same time! </p>
  
  <pre><code>navNext(next) {
          this.next = next;
          if (this.next === true &amp;&amp; this.router.url.startsWith('/') &amp;&amp; this.router.url.endsWith('/')) {            
              this.data.unsetNext();
              if (this.agreeTerms) { //&lt;-----
                  this.router.navigate(['/form']);
              } else {
                  this.error = 'Please accept the terms and conditions';
                  this.scrollBottom();
              }
          }
      }
  </code></pre>