Recommendation for adding an id to all pages/views #8814

4 Answer(s)

• 

  0

  enisn created 6 months ago

  Support Team .NET Developer

  Hi,

  Our angular team will help you on this question soon

  Save Cancel
• 

  0

  sumeyye.kurtulus created 6 months ago

  Support Team Angular Expert

  Hello, we are sorry for replying this late. Even if I cannot see your example, I am assuming that you want to add ids to the pages dynamically.

  Here is my suggestion for managing this using a service.

  // dynamic-id.service.ts
  import { inject, Injectable } from '@angular/core';
  import { Router, NavigationEnd } from '@angular/router';
  import { Renderer2, RendererFactory2 } from '@angular/core';
  
  @Injectable({
    providedIn: 'root',
  })
  export class DynamicIdService {
    private renderer = inject(Renderer2);
    private router = inject(Router);
    private rendererFactory = inject(RendererFactory2);
  
    constructor() {
      this.renderer = this.rendererFactory.createRenderer(null, null);
    }
  
    initialize() {
      this.router.events.subscribe(event => {
        if (event instanceof NavigationEnd) {
          this.assignIdToPage();
        }
      });
    }
  
    private assignIdToPage() {
      setTimeout(() => {
        const outlet = document.querySelector('router-outlet');
        if (outlet) {
          const pageElement = outlet.parentElement?.lastElementChild;
          if (pageElement && !pageElement.hasAttribute('id')) {
            const path = this.router.url.split('?')[0].replace(/\//g, '-').substring(1);
            const pageId = `page-${path || 'home'}`;
            this.renderer.setAttribute(pageElement, 'id', pageId);
          }
        }
      });
    }
  }
  

  Then you can initialize this in your app component

  // app.component.ts
  import { Component, inject } from '@angular/core';
  import { DynamicIdService } from './unique-id/dynamic-id.service';
  
  @Component({
    selector: 'app-root',
    template: `
      <abp-loader-bar></abp-loader-bar>
      <abp-dynamic-layout></abp-dynamic-layout>
      <abp-gdpr-cookie-consent></abp-gdpr-cookie-consent>
    `,
  })
  export class AppComponent {
    private dynamicIdService = inject(DynamicIdService);
    constructor() {
      this.dynamicIdService.initialize();
    }
  }
  
  

  Let us know your constraints, and we will be happy to refine the solution further.

  Save Cancel
• 

  0

  paul.harriman created 6 months ago

  I needed to modify the code a little, still testing.

  I had issues with using renderer in a service. I found a work around.

  Also had issues with some items under administration, think i found a work around for this also.

  i will need to do more testing but the code was a great base to start with !!!

  Save Cancel

  1
• 

  0

  sumeyye.kurtulus created 6 months ago

  Support Team Angular Expert

  Thank you for confirmation. You can reach when you need further assistance.

  Save Cancel