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

paul.harriman created one month ago

ABP Framework version: v8.0.4
UI Type: Angular
Database System: EF Core (SQL Server)
Tiered (for MVC) or Auth Server Separated (for Angular): no
Exception message and full stack trace:
Steps to reproduce the issue:

We are looking for a recommendation to how we can attach an id to each page. For pages we own we can add an id on to the abp-page like the id='main-content' shown below. Pages which are NOT under our control, we do not have a solution. The id will be the same for all pages, it is NOT dynamic. If you're wondering why we need this it is for 508 (accessibility)

We are looking for a recommendation.

enisn created 25 days ago

Support Team .NET Developer

Hi,

Our angular team will help you on this question soon

sumeyye.kurtulus created 23 days 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: `
    &lt;abp-loader-bar&gt;&lt;/abp-loader-bar&gt;
    &lt;abp-dynamic-layout&gt;&lt;/abp-dynamic-layout&gt;
    &lt;abp-gdpr-cookie-consent&gt;&lt;/abp-gdpr-cookie-consent&gt;
  `,
})
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.