CODEWITHSUNDEEP
angularroutes
TomBaine
TomBaine

Reputation: 773

HTML links to routes in Angular app

How do I (re)format links within an external html file that target different routes in an Angular app that "work" without reloading the app when clicked. The external html file gets loaded into one view and contains links - of the form <a href="/persons/:id"> - to other views.

Edited... Sorry, but my description was poor. The external html file contains text AND links. As a simplified version:

<p>... blah blah blah.</p><p>Enter your survey data into <a href="/persons">the form</a> and click the 'Analyze' button</p><p>... blah blah blah.</p>

How do I get links such as these, surrounded by text, to be formatted correctly so that I don't get the app reloading when they are clicked?

Upvotes: 1

Views: 8141

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658205

Use the routerLink directive

<a [routerLink]="'/persons/' + id"

or

<a *ngFor="let url in links" [routerLink]="url"

where the urls in an array links need to be prepared so that :id is replaced by the actual id.
This can also be resolved in the binding, but for this more information is needed about the structure of your data.

Upvotes: 0

penleychan
penleychan

Reputation: 5470

Please see the documentation/tutorial from angular... https://angular.io/guide/router

<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>

Upvotes: 2

Related Questions