Angular-এ সক্রিয় লিঙ্ক স্টাইল করা

লিঙ্কগুলি যাদের URL অ্যাড্রেস বারের সাথে মেলে সেগুলিকে কোনও শৈলী দিয়ে হাইলাইট করা যেতে পারে, উদাহরণস্বরূপ, রং দিয়ে। এর জন্য Angular-এ একটি বিশেষ বৈশিষ্ট্য রয়েছে RouterLinkActive।

চলুন দেখে নেওয়া যাক এটি কীভাবে কাজ করে। প্রথমে এটি ইম্পোর্ট করি:

import { RouterLinkActive } from '@angular/router';

ডেকোরেটরে লিখি:

@Component({
	......
	imports: [RouterOutlet, RouterLink, RouterLinkActive],
	......
})

এবং এখন আমাদের লিঙ্কগুলিতে এই বৈশিষ্ট্যটি যোগ করি:

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

আপনি দেখতে পাচ্ছেন, আমাদের উদাহরণে বৈশিষ্ট্যের মান হল active। এটি একটি CSS ক্লাসের নাম যা সক্রিয় লিঙ্ককে দেওয়া হবে। এখন আমরা সেগুলিকে আমাদের ইচ্ছা অনুযায়ী স্টাইল করতে পারি:

.active {
	color: red;
}

আপনার প্রকল্পে সক্রিয় লিঙ্কগুলি স্টাইল করুন।