Angular - Google analytics not tracking page path changes

I have set up google analytics GA4 and added the snippets to my Angular application:

index.html:

  <script async src="https://www.googletagmanager.com/gtag/js?id=G-mytagid"></script>

  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }

    gtag('js', new Date());
  </script>

then in app.component.ts:

this.router.events.subscribe(event => {
  if (event instanceof NavigationEnd) {
    console.log(event.urlAfterRedirects);
    gtag('config', 'G-mytagid',
      {
        'page_path': event.urlAfterRedirects,
      }
    );
  }
});

Google analytics dashboard detects the page views and changes and also the console also logs the urlAfterRedirects, but on the GA dashboard my application name increments without change in the actual path. I am wanting to tack the actual path/ page we are on.

I am wondering how to do this?

Thanks