Angular, define global variable over components for navigation

I have the following navigation link:

<a (click)="mylink(someLink)">SomeLink</a>

Which belongs to:

<div #someLink class="someLink active">
 Container Content
</div>

But the relative TypeScript code works only local in the same compoment. But I want outsource the links in an own navigation component and another component for the content.

mylink(page: any, event: any) {
    page.classList.add('active'); // show the 'WebContainer SomeLink'
}

How can I realise this?

>Solution :

You can use Angular Routing for this. See: https://angular.io/tutorial/toh-pt5

When generating your app, just say "Yes" to Routing.
In your navigation component build a link like the following:

<a [routerLink]="['yourcomponent']" ">SomeLink</a>

Hint: Do not use a href tag !!!

In app.modules.ts check for:

import { AppRoutingModule } from './app-routing.module';

In app-routing.modules.ts import all clickable components:

import { YourComponent } from './yourcomponent/yourcomponent.component';

and add your routes (e.g. links) in the same file like this:

const routes: Routes = [
  { path: '', component: YourStartComponent },
  { path: 'yourcomponent', component: YourComponent },
];