Angular Anchor href click event binding tutorials & Examples

This article explains how to add a click event to an anchor tag and navigate across different sections of a page.

Learn how to navigate different web pages and dynamically add and remove HTML elements.

The HTML anchor tag is used in the following use cases.

• Navigate to different pages
• Go to a specific div or section of the page, such as the top, bottom, or specified div.
• Dynamically add/remove HTML components

Do we have a href tag to anchor the tag in Angular for navigating purposes? Can we use the href attribute in the Angular application?

href is not supported in Angular, But you can use a property binding event, for example, attach a click event to it, and write a navigation code in the click binding event. How do you navigate without the href attribute?

You have to write code to handle the anchor click binding event. Whenever the user clicks on the anchor event, It triggers the DOM event binding.

First, create an angular application using the ng cli command. This article does not cover how to create an angular application.

Let’s see some examples of anchor event binding in Angular.

• Angular Button Click Event
• Fix for Angular require typescript version
• Convert Number to Words
• Detect @input() bindings changes in Angular?
• print application package json version in angular
• Compodoc angular documentation
• Read More/Less Button Link in Angular
• Angular 15 GUID example
• Multiple ways to get input text value in Angular
• Add Google Fonts in Angular
• Angular Media Query Styles

Angular Pipe Tutorials

• Angular 15 Convert a string to small case example
• Angular Material List example
• Angular material Snackbar tutorials

Anchor click event without href property

Anchor tag(s) has the below attributes in standard legacy javascript applications.

• href: Contains URL string to navigate on clicking anchor link.
• clicks: Trigger click event in clicking an anchor link

href attributed are not supported in Angular application.

Then, How do you handle the click event without the href attribute?

In the HTML template file, please add an anchor tag with click events as follows.

important points

• href is not required as it forwards the request
• you can also add href=“javascript:void(0);”
• Add click event with calling function
• Anchor displays as a link, change the style as cursor=pointer to clickable like a button

<div style="text-align:center">
    <h1>
       Angular Button Click Event Example
    </h1>
<a class ='btn' style="cursor:pointer" (click)="clickme();">click me</a>

or

<a href="javascript: void(0);" (click)="clickme()"> click here
    <h2>{{msg}}</h2>
 </div>

In your typescript code

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  msg:string;
  
  constructor() {
   }

   clickme(){
    this.msg='anchor tag is Clicked';
    return this.msg;
  }
}

Angular anchor tag routeLink example?

Using the links value in href in an anchor tag, You can navigate from one page to another page or move from one position to another position on a single page in the Angular app.

It achieves using the anchor href attribute in legacy javascript and jquery apps.

In the Angular application, the same can be achieved with the router link attribute as seen below.

In Angular component HTML file

[Home](https://www.cloudhadoop.com/about)

The router link path must be configured in the router file as seen below

 { path: 'home', component: HomeComponent }

In angular component

<a routerLink="/home">Home</a>

or with binding

<a [routerLink]="/home">Home</a>

How to open a link url in a new window in Angular?

In this example, You have an angular component that has a link, when a user clicked on it, It opens a new link url in a new browser tab or new window.

In javascript, We have a window. open method to open a new window.

It is easy and simple to use in angular components.

This can be done in two ways.

Using click event handler- windows. open accepts the first parameter as the link url and the second optional parameter contains the value to open a link same or a new window.

In app.component.html file

<a (click)="openLink("www.cloudhadoop.com")">Go to cloudhadoop</a>

In typescript component - app.component.ts file -

openLink(url: string){
    window.open(url, "_blank");
}

using href attribute:

<a href="www.cloudhadoop.com/" target="_blank">Open </a>

How to disable anchor link in Angular component?

Sometimes, We want to disable anchor links based on typescript variables.

Normally, We will disable anchor links in components in many ways as follows.

The first way is to use the class attribute directive.

In the component.css file -

.disable{
  pointer-events:none;
}

And component.html

<a href="#" [class.disable]="true">Add item</a>

Second way using the style attribute directive

<a href="#" [style.pointer-events]="'none" 
>Add item</a>

The third way use the ngClass directive.

<a [ngClass]="{'disabled': true}"> Add Item</a>

How do you disable the anchor tag with a click event?

It is an example of doing disabled programmatically.

Declare a variable- is disabled in a typescript component and initialized with false.

In the click event, the update is disabled to true.

app.component.ts file-

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isDisable:boolean=false;
  constructor() {

   }

   disableOtherLinks(){
      this.isDisable=true;
  }
}

An HTML template file, We have Six anchor links, On clicking the first link, the variable value is set to true,

This variable is used to bind in the other 5 links to disabled.

The following conditional attributes are used with

• ngStyle attribute
• style.pointer-events
• attr.disabled
• ngClass

In app.component.html -

<a href="javascript: void(0);" (click)="disableOtherLinks()"> Disable All links except me

<a [ngStyle]="{'pointer-events': isDisable ? 'none': 'auto'}"
> Link1
<a  [style.pointer-events]="isDisable ?'none':'auto'">Link2</a>

<a  [style.pointer-events]="isDisable ?'none':'auto'">Link3</a>

<a [attr.disabled]="isDisable">Link4</a>
<a [ngClass]="{'disabled': isDisable}"> Link5</a>

What is the difference between routerLink and href?

Both are used for navigation purposes in different contexts. href is used in anchor href in standard HTML pages and routerlink in angular.

• In Standard HTML applications, the Href attribute in the anchor tag is used to navigate other pages or different sections of the same page when the anchor link is initiated click event by the user.
• It loses the current state after navigating to another page.
• For example, the current page contains an input textbox, and href makes loose input value after navigation.
• It reloads the page

Angular routerLink:

• routerLink is an angular attribute that is called when the anchor tag is clicked and navigates and reloads other components or pages.
• It preserves the current state after navigation to a different page.
• It does not reload the request
• For example, the current page contains an input textbox, routerLink retains input value after navigation.

Conclusion

In angular, href is not supported, so learned multiple ways to do navigation using routelink and event binding click event.