title: Route query parameters is empty on first render in Angular
body: <p>I have a scenario in which I decide the actions based on the query parameters of the angular url.</p>
  <p>For example, if the url is <code>localhost:4200/token=abc</code> I need to do some tasks and if the url is <code>localhost:4200</code> then I need to do something else. I have added this logic in the <code>ngOnInit()</code> of <code>app component</code>. The problem is, the query parameters are empty while rendering the component for the first time, and it takes a while before the params value is fed.</p>
  <p>Code:</p>
  <pre class="lang-js prettyprint-override"><code>    constructor(private route: ActivatedRoute,private router:Router){}
      ngOnInit(): void {
  
      this.route.queryParams.subscribe((params: any)=&gt;{
      console.log(&quot;params 1:&quot;,params);
      if(Object.keys(params).length){ //If there are query parameters 
            console.log(&quot;If exectued&quot;,params);
           //do Something 
      }
      else{
          console.log(&quot;Else exectued&quot;,params);
          //do Something else
       }
      })
    }
  </code></pre>
  <p>The problem is params are empty initially and it goes to <code>else</code> condition. It again goes to <code>if</code> afterwards. The output is something like</p>
  <pre><code>params 1: {}
  Else executed &gt; {} 
  If executed &gt; {token:abc}
  </code></pre>
  <p>How to check if the route has been initialized properly with parameters and then proceed?</p>
  <p>PS: I found a <a href="https://stackoverflow.com/a/61043260/8070068">similar thing in Next.js</a> but how to do this in Angular?</p>