Detect if page if component is loaded first time angular 6

You can probably leverage sessionStorage or localStorage for this.

Something like this:

ngOnInit() {
  if (sessionStorage.getItem('yourComponentNameLoadedAlready')) {
    // branch that this component has already been loaded
  } else { 
    // branch that this component is loading for the first time, set the session storage key to 'yes' to tell you this component has already loaded.
    sessionStorage.setItem('yourComponentNameLoadedAlready', 'yes');
   // continue doing what you want to do for first time load.
  }
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

localStorage has a similar API but its storage is more permanent.

The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year and The sessionStorage object stores data for only one session (the data is deleted when the browser tab is closed), so you can't check properly if your component has executed for the first time and the value of variable won't clear for next time your component executes. I think it's better to use a global service because with every refresh your variable would set. Your service can be something like this:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class GlobalSettingsService {

  private _yourComponentNameLoadedAlready:boolean;

  constructor() { }


  public set YourComponentNameLoadedAlready(v : boolean) {
    this._yourComponentNameLoadedAlready= v;
  }

  public get YourComponentNameLoadedAlready() : boolean {
    return this._yourComponentNameLoadedAlready;
  }


}

//Your component

constructor (private globalSettingsService:GlobalSettingsService){ 
  }

  ngOnInit() {
  if (this.globalSettingsService.YourComponentNameLoadedAlready) {
    //This component has already been executed

  } else { 
     //This is the first time that this component executes
     this.globalSettingsService.YourComponentNameLoadedAlready=true;

  }
}

I've found a nice way to do this using previousNavigation from the Router.getCurrentNavigation() method

This returns null if there is no previous navigation.

What's not mentioned in the docs though is that Router.getCurrentNavigation() only works when used in the constructor of the class.

export class SomeComponent  {
  hasPreviousNavigation;

  constructor(
    private router: Router,
  ) {
    this.hasPreviousNavigation = Boolean(this.router.getCurrentNavigation().previousNavigation);
  }
}

previousNavigation is of type Navigation

type Navigation = {
    id: number;
    initialUrl: string | UrlTree;
    extractedUrl: UrlTree;
    finalUrl?: UrlTree;
    trigger: 'imperative' | 'popstate' | 'hashchange';
    extras: NavigationExtras;
    previousNavigation: Navigation | null;
};

I wrote about this in this short article Angular: Determine previous page URL