CODEWITHSUNDEEP
angular
Cyclicduck
Cyclicduck

Reputation: 593

Templating with href in angular (4)

So I know that in Angular 2 we can simply substitute ng-href for href in order to make templated urls work, but it doesn't work for me in Angular 4. I can't find any documentation for it on angular.io either, so how does it work?

Edit: Maybe I have the version #s confused. I'm concerned with the latest Angular (angular.io)

I want to link to external stylesheets, like link rel="stylesheet" href="...">

where ... is {{link}}, link = https://www.w3schools.com/w3css/4/w3.css

Upvotes: 38

Views: 138659

Answers (4)

Ankit Raonka
Ankit Raonka

Reputation: 6839

The main difference between Angular 2 and 4 is @angular/Router

use this as route

[{ path: 'xyz', component: XYZComponent}]

and redirect as

<a routerLink='/xyz' >xyz</a>

Upvotes: 19

Reactgular
Reactgular

Reputation: 54741

AngularJS required that you use ng-href because there were issues with binding expressions to some types of DOM elements and attributes.

This problem doesn't exist in Angular now.

The following will work as expected:

<a href="{{your expression here}}"></a>

You can also bind using the attr prefix like this:

<a [attr.href]="your expression here"></a>

As others have mentioned. If you are using routing and want to add a href attribute to a specific route. Use the routerLink directive as it will add the href attribute to <a> tags.

Upvotes: 72

Valery Lyatsevich
Valery Lyatsevich

Reputation: 354

Don't use href="page" and ng-href="page" however use routerLink="/page"

Upvotes: 8

Justin
Justin

Reputation: 175

Should be using routerLink for generating links

https://angular.io/api/router/RouterLink

Upvotes: 4

Related Questions