# 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:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://m335.ict-bz.ch/tag-1/tour-of-heroes/5.-navigation/erganzend-zu-navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.