Angular में सक्रिय लिंक्स को स्टाइल करना

ऐसा करना संभव है कि वे लिंक्स, जिनका URL एड्रेस बार से मेल खाता है, किसी स्टाइल से हाइलाइट हों, उदाहरण के लिए, रंग से। इसके लिए Angular में एक विशेष एट्रिब्यूट RouterLinkActive प्रदान किया गया है।

आइए देखते हैं कि यह कैसे काम करता है। शुरुआत में इसे इम्पोर्ट करते हैं:

app/app.component.tsimport { RouterLinkActive } from '@angular/router';

डेकोरेटर में लिखते हैं:

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  ......
})

और अब इस एट्रिब्यूट को हमारे लिंक्स में जोड़ते हैं:

app/app.component.html<nav>
  <a
    routerLink="/aaaa-component"
    routerLinkActive="active"
  >
    Aaaa Component
  </a>
  <a
    routerLink="/bbbb-component"
    routerLinkActive="active"
  >
    Bbbb Component
  </a>
</nav>

जैसा कि आप देख रहे हैं, हमारे उदाहरण में एट्रिब्यूट का मान active है। यह CSS क्लास का नाम है, जो सक्रिय लिंक को दिया जाएगा। अब हम उन्हें अपनी इच्छानुसार स्टाइल कर सकते हैं:

css.active {
  color: red;
}