title: How to generate a angular persistent unique identifier per component instance?
body: <p>I need to generate an id in order to save on DB the last filter aplied by my filter component. the problem is that the filter component have instances in several parts of my app and I need a way to generate a persitant id for each of the instances in order to save to the DB.</p>
  <p>I tried with the nghost attribuete but this one is the same in each instance.</p>
  <pre class="lang-js prettyprint-override"><code>  private getId(): any {
      const id = this.constructor['ɵcmp'].id;
      return id;
    }
  </code></pre>
  <p>I can not depend on random generation because the id generated may change if the user change the host or the browser.
  Is there a way to acomplish this?</p>
  <p>this is my current <a href="https://ng-run.com/edit/LisUHl422asCOgGMr7GG?open=app%2Fchild%2Fchild.component.ts" rel="nofollow noreferrer">sampler</a></p>
  <p>In my last attempt I add a static number var in order to get a counter for the components then add this conter to the host id</p>
  <pre class="lang-js prettyprint-override"><code>export class ChildComponent {
    static index = 0;
    unique = this.constructor['ɵcmp'].id + ChildComponent.index;
    constructor() {
      ChildComponent.index ++;
    }
  }
  </code></pre>
  <p>This solution do not offer all I need because the generate ID can variyin depending of the order of execution of the different filters, this may caus that two filters in two diferent routes of the app get the same id.</p>
  <p>To prevent this I add the Router service in order to get the current url:</p>
  <pre class="lang-js prettyprint-override"><code>  constructor(private router: Router) {
      ChildComponent.index ++;
      this.unique = btoa(this.constructor['ɵcmp'].id + ChildComponent.index + this.router.url);
    }
  </code></pre>
  <p>Now I realize that if we navigate directly by url or if we navigate from the home page we get a different id for the same component instance.</p>