Opt in/Opt out of google analytic based on cookie consent - Angular

Question

I am trying to integrate Google Analytics with cookie consent. This means if a user gives his consent then the tracker will work else not.

I am using

window['ga-disable-${environment.gaTrackingId}'] = false;

to opt in google analytic and window['ga-disable-${environment.gaTrackingId}'] = true; to opt out of google analytic by default it will be opt out.

My app.component.ts looks like this

import {
  Component,
  HostListener,
  OnInit,
  OnDestroy
} from '@angular/core';
import {
  NgcCookieConsentService,
  NgcInitializeEvent,
  NgcNoCookieLawEvent,
  NgcStatusChangeEvent
} from 'ngx-cookieconsent';
import {
  Subscription
} from 'rxjs';
import {
  environment
} from 'src/environments/environment';
import {
  Title
} from '@angular/platform-browser';
import {
  ActivatedRoute
} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit, OnDestroy {
  isShow ? : boolean;
  topPosToStartShowing = 100;
  public consent!: string;
  notTrackScript!: any;
  trackScript!: any;


  //keep refs to subscriptions to be able to unsubscribe later
  private popupOpenSubscription!: Subscription;
  private popupCloseSubscription!: Subscription;
  private initializeSubscription!: Subscription;
  private statusChangeSubscription!: Subscription;
  private revokeChoiceSubscription!: Subscription;
  private noCookieLawSubscription!: Subscription;

  constructor(private ccService: NgcCookieConsentService, private title: Title) {


    if (environment.gaTrackingId) {
      // register google tag manager
      const gTagManagerScript = document.createElement('script');
      gTagManagerScript.async = true;
      gTagManagerScript.src = `https://www.googletagmanager.com/gtag/js?id=${environment.gaTrackingId}`;
      document.head.appendChild(gTagManagerScript);

      // register google analytics
      const gaScript = document.createElement('script');
      gaScript.innerHTML = `
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', '${environment.gaTrackingId}');
      `;
      document.head.appendChild(gaScript);

      this.notTrackScript = document.createElement('script');
      this.notTrackScript.innerHTML = `window['ga-disable-${environment.gaTrackingId}'] = true;`
      document.head.appendChild(this.notTrackScript)

      this.trackScript = document.createElement('script');
      this.trackScript.innerHTML = `window['ga-disable-${environment.gaTrackingId}'] = false;`
    }

  }

  ngOnInit(): void {

    this.statusChangeSubscription = this.ccService.statusChange$.subscribe(
      (event: NgcStatusChangeEvent) => {
        // you can use this.ccService.getConfig() to do stuff...
        console.log(`initialized: ${JSON.stringify(event)}`);
        if (event.status === 'allow') {
          document.head.removeChild(this.notTrackScript)
          document.head.appendChild(this.trackScript)
          location.reload()
        }

      });

  }
  ngOnDestroy(): void {
    // unsubscribe to cookieconsent observables to prevent memory leaks
    this.popupOpenSubscription.unsubscribe();
    this.popupCloseSubscription.unsubscribe();
    this.initializeSubscription.unsubscribe();
    this.statusChangeSubscription.unsubscribe();
    this.revokeChoiceSubscription.unsubscribe();
    this.noCookieLawSubscription.unsubscribe();
  }



}

Now with this code, I can make google analytic off by default. But it is not starting if I give consent as allow.