you’re right: :target does work, but only momentarily in many browsers, especially when routing with Angular. This is due to how Angular handles navigation without full page reloads, which causes :target styles to flash and vanish quickly or not apply at all.

Add a CSS Class After Navigation

Inject the Router and ActivatedRoute in your component:

import { Component, AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-category-details',
  templateUrl: './category-details.component.html',
  styleUrls: ['./category-details.component.scss']
})
export class CategoryDetailsComponent implements AfterViewInit {

  constructor(private route: ActivatedRoute) {}

  ngAfterViewInit() {
    this.route.fragment.subscribe(fragment => {
      if (fragment) {
        const el = document.getElementById(fragment);
        if (el) {
          el.classList.add('highlight-target');

          // Optional: remove class after a delay
          setTimeout(() => {
            el.classList.remove('highlight-target');
          }, 2000);
        }
      }
    });
  }
}

Add styling in your CSS or SCSS:

.highlight-target {
  outline: dashed 2px orange;
  background-color: rgba(255, 165, 0, 0.1);
  scroll-margin-top: 100px; // if you have sticky headers
  transition: background-color 0.3s ease;
}

First, convert the fragment observable from ActivatedRoute to a signal, using toSignal:

export class AppComponent {
  route = inject(ActivatedRoute);
  fragment = toSignal(this.route.fragment);
  name = 'Angular';

  ids: Array<String> = ['one', 'two', 'three', 'four'];
}

Then, we simply, use the string method .includes(...) to check if the ID matches the current fragment.

<section>
  <div
    class="section"
    *ngFor="let link of ids"
    [attr.id]="link"
    [ngClass]="{ 'is-active-section': fragment() === link }"
  >
    <h1>{{ link }}</h1>
    <div class="content">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt saepe
      exercitationem praesentium modi repudiandae dicta consectetur ab veritatis
      quaerat quibusdam quod, dolorem fugit temporibus voluptas magni ad odio,
      adipisci doloremque!
    </div>
  </div>
</section>

Full code:

HTML:

<hello name="{{ name }}"></hello>
<div class="links">
  <ul>
    <li *ngFor="let link of ids">
      <a [routerLink]="'.'" [fragment]="link">{{ link }}</a>
    </li>
  </ul>
</div>
{{ fragment() }}
<section>
  <div
    class="section"
    *ngFor="let link of ids"
    [attr.id]="link"
    [ngClass]="{ 'is-active-section': fragment() === link }"
  >
    <h1>{{ link }}</h1>
    <div class="content">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt saepe
      exercitationem praesentium modi repudiandae dicta consectetur ab veritatis
      quaerat quibusdam quod, dolorem fugit temporibus voluptas magni ad odio,
      adipisci doloremque!
    </div>
  </div>
</section>

TS:

import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { ActivatedRoute } from '@angular/router';
import { delay } from 'rxjs';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: false,
})
export class AppComponent {
  route = inject(ActivatedRoute);
  fragment = toSignal(this.route.fragment);
  name = 'Angular';

  ids: Array<String> = ['one', 'two', 'three', 'four'];
}

Stackblitz Demo

Introduce delay to end the styling:

Same as the above code, here we use linkedSignal, which is computed from a source signal, but we can change the value.

export class AppComponent {
  route = inject(ActivatedRoute);
  fragment = toSignal(this.route.fragment);
  timedFragment = linkedSignal(() => this.fragment());

Then using effect we trigger a setTimeout to fire after 2000s then reset the linkedSignal, until a new fragment arrives and the process is triggered again.

constructor() {
  effect(() => {
    if (this.fragment()) {
      setTimeout(() => {
        this.timedFragment.set('');
      }, 2000);
    }
  });
}

Stackblitz Demo