I have the following navigation link:
<a (click)="mylink(someLink)">SomeLink</a>
Which belongs to:
<div #someLink >
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?
CodePudding user response:
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 },
];