[[oktatas:web:angular|< Angular]]

====== Angular 18 Routing ======

  * **Szerző:** Sallai András
  * Copyright (c) 2024, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Navigáció =====

Az app.component.html fájlban:

<code javascript>
imports: [RouterLink],
</code>


<code html src/app/app.component.html>
<nav>
  <ul class="nav">
    <li class="nav-item">
      <a routerLink="/"
      class="nav-link">Dolgozók</a>
    </li>
    <li class="nav-item">
      <a routerLink="/pos"
      class="nav-link">Beosztások</a>
    </li>
  </ul>
</nav>

</code>

<note important>
A RouterLink importálása nélkül az "a" elemben található szöveg nem 
lesz kattintható!

</note>
===== A fő komponensben megjelenítés =====

Az app.component.html fájlban:

<code javascript>
imports: [RouterOutlet],
</code>


Így már két bejegyzésünk van:

<code javascript>
imports: [RouterOutlet, RouterLink],
</code>


Tegyük a link alá:
<code html>
<div class="container">
  <router-outlet></router-outlet>
</div>
</code>

===== Teljes kód =====

<code html src/app/app.component.html>
<nav>
  <ul class="nav">
    <li class="nav-item">
      <a routerLink="/"
      class="nav-link">Dolgozók</a>
    </li>
    <li class="nav-item">
      <a routerLink="/pos"
      class="nav-link">Beosztások</a>
    </li>
  </ul>
</nav>

<div class="container">
  <router-outlet></router-outlet>
</div>

</code>

<code javascript src/app/app.component.ts>
import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'app06';
}
</code>


===== Routing =====

<code javascript src/app/app.routes.ts>
import { Routes } from '@angular/router';
import { EmpComponent } from './emp/emp.component';
import { PosComponent } from './pos/pos.component';

export const routes: Routes = [
  { path: '', component: EmpComponent },
  { path: 'pos', component: PosComponent }
];
</code>