What is the difference between anchor href vs angular routerlink in Angular ?
Last Updated :
31 Jul, 2024
Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them. Users can switch between these views without losing the application state and properties. In this example, we will learn the difference between anchor href vs angular routerlink in Angular.
href Attribute
The href attribute is a standard HTML attribute used in anchor (<a>) tags to specify the URL of the resource being linked to. When used in Angular without the Angular Router, it triggers a full page reload when navigating to a different route, resulting in a complete page refresh.
Syntax
<a href="/https/www.geeksforgeeks.org/home">
Go to Home
</a>
Example: This example illustrates the usage of the href Attribute, where in this case, clicking on the links triggers a full page reload as the href attribute is used.
HTML
<!-- app.component.html -->
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>
What is the difference between anchor href
vs angular routerlink in Angular?
</h3>
<a href="/home"> Home</a><br />
<a href="/about">About</a>
<router-outlet></router-outlet>
<!-- about.component.html -->
<h3 style="color:violet">
Hi Geek!! Use the like button to vote
</h3>
<!-- home.component.html -->
<h3 style="color: indianred;">
Hi Geek!! Please vote for me for
Geeks Premier League
</h3>
//app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
// app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { AppComponent }
from './app.component';
import { AboutComponent }
from './about/about.component';
import { HomeComponent }
from './home/home.component';
import { AppRoutingModule }
from './app-routing.module';
import { RouterModule, Routes }
from '@angular/router';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
RouterModule.forRoot(routes),
BrowserModule,
AppRoutingModule
],
exports: [
RouterModule
]
})
export class AppModule { }
Output:
routerLink Directive
The routerLink directive is part of the Angular Router and is used to navigate between routes within an Angular application. It provides a more dynamic and efficient way of handling navigation compared to traditional href links, as it updates the view without triggering a full page reload. The routerLink can also take an array to navigate with parameters or additional options.
Syntax
<a routerLink="/home">
Go to Home
</a>
Example: This example illustrates the usage of the routerLink Directive, where the navigation occurs within the Angular application without a full page reload.
HTML
<!-- app.component.html -->
<head>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
What is the difference between anchor
href vs angular routerlink in Angular?
</h3>
<a routerLink="/home"> Home</a><br />
<a routerLink="/about">About</a>
<router-outlet></router-outlet>
<!-- about.component.html -->
<h3 style="color:violet">
Hi Geek!! Use the like button to vote
</h3>
<!-- home.component.html -->
<h3 style="color: indianred;">
Hi Geek!! Please vote for me for
Geeks Premier League
</h3>
// app.component.ts
import { Component } from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent { }
// app.module.ts
import { NgModule }
from '@angular/core';
import { BrowserModule }
from '@angular/platform-browser';
import { AppComponent }
from './app.component';
import { AboutComponent }
from './about/about.component';
import { HomeComponent }
from './home/home.component';
import { AppRoutingModule }
from './app-routing.module';
import { RouterModule, Routes }
from '@angular/router';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' }
];
@NgModule({
bootstrap: [
AppComponent
],
declarations: [
AppComponent,
HomeComponent,
AboutComponent
],
imports: [
RouterModule.forRoot(routes),
BrowserModule,
AppRoutingModule
],
exports: [
RouterModule
]
})
export class AppModule { }
Output:
Difference between href and routerLink
| Features | href | routerLink |
|---|
| Navigation Mechanism | It triggers a full page reload and performs a traditional navigation, fetching a completely new HTML page from the server. | It uses Angular's built-in router to navigate between views within a single-page application, updating the content dynamically without a full page reload. |
| Page Reload | Results in a complete page refresh, causing the loss of the current application state and potentially leading to a slower user experience. | Navigates without reloading the entire page, maintaining the application state and providing a smoother user experience. |
| Single Page Application (SPA) | Originally designed for traditional multi-page applications, where each link corresponds to a separate HTML page. | Tailored for SPAs, enabling seamless navigation between views without the need for full page reloads. |
| Angular Router Features | Lacks integration with Angular Router features, such as route parameters, route guards, and other advanced navigation options. | Works seamlessly with Angular Router, allowing for the utilization of features like route parameters, query parameters, child routes, and route guards. |
| Application Performance | May introduce delays due to full page reloads and increased server requests. | Enhances performance by loading only the necessary components and updating the view within the existing application, reducing latency. |
| Dynamic Navigation | Generally used for static links to external resources or other pages without involving dynamic Angular features. | Facilitates dynamic navigation within the Angular application, supporting dynamic route generation based on components and data. |
Conclusion
The href is a standard HTML attribute for linking to external resources and causes a full page reload in Angular applications, whereas, the routerLink is a directive provided by the Angular Router specifically designed for navigating within the application without triggering a complete page refresh. Using routerLink is generally preferred in Angular applications for a smoother and more efficient user experience.
The href is a traditional HTML attribute for general-purpose navigation, while the routerLink is a specialized directive provided by Angular Router for efficient, dynamic, and state-preserving navigation within single-page applications. The choice between them depends on the specific requirements of your application and whether you are working within the context of a single-page application.
Similar Reads
What is the difference between Service Directive and Module in Angular ?
Angular is a Typescript framework used to build dynamic and Single-Page Applications. This has a strong focus on modularity and reusability of code which helps in creating complex and maintainable applications. At the core, Angular has 3 fundamental building blocks, i.e., Service, Directive and Modu
6 min read
What is the Difference Between factory and service in AngularJS ?
AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. In this article, we will explore the differences between t
4 min read
What is the difference between $watch and $observe in AngularJS ?
AngularJS provides different methods to observe/watch the changes in its elements and variables. The $observe and $watch are two different methods that serve this purpose. $observe is a method that is responsible to observe/watch the changes in the DOM attribute. We use $observe when we want to obse
3 min read
What is the difference between '@' and '=' in directive scope in AngularJS ?
AngularJS is a popular JavaScript framework, that provides powerful features for building dynamic web applications. When creating custom directives in AngularJS, you may come across the need to define a scope for your directive. The two most common methods to do this are by using the @ and = symbols
4 min read
What is the difference between ng-app and data-ng-app in AngularJS ?
In web application development, AngularJS is one of the most favorite dynamic JavaScript frameworks that has HTML through script tags, enabling us to augment the HTML attributes using the directives and facilitating the data binding through the expressions.In this article, we will see the concepts o
5 min read
What Is Difference Between Style And StyleUrl In Angular?
When you create a component in Angular, you sometimes want to style it to look good and match your application's design. Angular provides two ways to add styles to a component: style and styleUrls. They might look similar but they have different purposes. We know that the decorator functions of @Com
5 min read
What is the Difference Between $routeProvider and $stateProvider in AngularJS ?
In AngularJS, as we create Single-Page Applications, we need to implement the routing of components to view those images without having full page reloads. This can be achieved with the most popular routing methods, i.e., $routeProvider (ngRoute) and $stateProvider (ui-router).In this article, we wil
5 min read
Difference between AngularJS Expression and Angular Expression
AngularJS is a JavaScript-based framework that can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. Angular on the other hand is a client-side TypeScript-bas
3 min read
What is the Difference between Constructor and ngOnInit in AngularJS ?
Constructor: Constructor is the default method for a class that is created when a class is installed and ensures the proper execution of the roles in the class and its subsections. Angular are preferably the Dependency Injector (DI), analyzes the builder's components and when creating a new feature
3 min read
Differences between Angular 1.x and Angular2+
Angular is a well-known JavaScript framework that is used to create awesome responsive web applications like ReactJS. Angular 1.x, is the version that is considered s the initial version of the main framework, while Angular 2+ is considered the subsequent version which also includes Angular 2, Angul
5 min read