# Ergänzend zu Navigation

## Wie kann ich zu einer Seite resp. zurück navigieren?

Die Navigation ist basierend auf welcher URL wir gerade haben resp. welcher Route dazu passt. Wenn die URL gewechselt wird, ändert die aktuelle Seite. Aber wir haben einige weitere Optionen um zu navigieren:

Zuerst müssen wir den Angular Router importieren und in unserer Page/Component hinzufügen. Füge dazu in der Page/Component folgendes ein:

{% code title="navigation.page.ts" %}

```typescript
// Schritt 1: Angular Router importieren
import { ..., inject } from '@angular/core';
import { Router } from '@angular/router';


... 

export class NavigationPage implements OnInit {
    // Schritt 2: Router injecten
    private router = inject(Router)
    
    
    ...
}
```

{% endcode %}

Danach kann man ein normalen Angular Router **href** verwenden um auf eine andere Seite zu navigieren. `/detail` ist dabei die URL der Zielseite.

{% code title="navigation.page.html" %}

```markup
<a [href]="'/detail/' + item.id">...</a>
```

{% endcode %}

oder auch im Code:

{% code title="navigation.page.ts" %}

```javascript
navigateToDetail() {
    this.router.navigateByUrl('/detail');
}
```

{% endcode %}

{% code title="navigation.page.html" %}

```markup
<button (click)="navigateToDetail()">Detailseite anzeigen</button>
```

{% endcode %}

## Wie übergebe ich Werte zwischen zwei Seiten?

Das Array, welches der `navigate` Funktion als Parameter übergeben wird, akzeptiert die folgenden Parameter:

{% code title="navigation.page.ts" %}

```javascript
navigateToDetail() {
    // Der Parameter 'id' wird später weiter unten weiterverwendet
    this.router.navigate(['/detail', { id: itemId }]);
}
```

{% endcode %}

Die Daten sind in der `PersonDetail`-Seite nun über die `ActivatedRoute` mit über `paramMap`zu holen:

{% code title="person-detail.page.ts" %}

```typescript
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-person-detail',
  templateUrl: './person-detail.page.html',
  styleUrls: ['./person-detail.page.scss'],
})
export class PersonDetailPage implements OnInit {
  private personID: number;
  private route = inject(ActivatedRoute);

  ngOnInit() {
    // Hier wird die Personen-ID über den Parameter 'id' geholt.
    this.personID = this.route.snapshot.paramMap.get('id');
  }

}
```

{% endcode %}

Mehr dazu findest du auch in folgendem Tutorial: