Angular Anchor href click event binding tutorials & Examples

Angular Anchor href click event binding tutorials & Examples

This article explains the process of adding a click event to an anchor tag, facilitating smooth navigation across diverse sections of a page. It includes effective methods for navigating between various web pages and dynamically managing the addition and removal of HTML elements.

The HTML anchor tag serves various purposes outlined below:

  • Facilitates navigation to different pages.
  • Enables navigation to specific div or section locations on the page, including the top, bottom, or a specified div.
  • Allows for dynamic addition and removal of 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?

In Angular, the href attribute is not supported. However, you can employ a property binding event. For instance, attach a click event and include a navigation code within the click binding event to achieve navigation without the href attribute.

To navigate without the href attribute, you need to write code to handle the anchor click binding event. Whenever a user clicks on the anchor, it triggers the DOM event binding.

Firstly, create an Angular application using the ng cli command. Note that this article does not cover the details of creating an Angular application.

Now, let’s explore some examples of anchor event binding in Angular.

You can see Other Angular Posts

Angular Pipe Tutorials

Anchor click event without href property

In standard legacy JavaScript applications, the anchor tag(s) possess the following attributes:

  • href: Contains a URL string for navigating upon clicking the anchor link.
  • clicks: Triggers the click event when clicking an anchor link.

However, it’s important to note that the href attribute is not supported in Angular applications. Then, How do you handle the click event without the href attribute?

In the HTML template file, please include an anchor tag with the following click event code:

Important Points:

  • The inclusion of href is not necessary, as it automatically forwards the request.
  • If preferred, you can add href="javascript:void(0);“.
  • Incorporate a click event linked to a specific function.
  • Style the anchor to display as a link by changing the cursor to pointer, providing a clickable button-like appearance.
<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;
  }
}

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 is achieved 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>

In this example, you have an Angular component that features a link. When a user clicks on it, it opens a new URL in a separate browser tab or window.

In JavaScript, we employ the window.open method to initiate the opening of a new window. This method is both easy and straightforward to use within Angular components.

This can be accomplished in two ways.

This can be done in two ways.

Using click event handler- window.open accepts the first parameter as the link URL, and the second optional parameter contains the value to determine whether to open the link in the 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>

Sometimes, we may need to disable anchor links based on TypeScript variables.

Typically, there are various ways to disable anchor links in components, such as:

One common approach is to utilize the class attribute directive.

In the component.css file -

.disable {
  pointer-events: none;
}

And component.html

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

The 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?

This is an example of programmatically disabling an anchor tag with a click event.

Start by declaring a TypeScript component variable named isDisabled and initialize it with the value false.

In the click event, update isDisabled 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;
  }
}

fix errors and grammatical Improve the readability of this:

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></a
  ></a
>

Both are used for navigation purposes in different contexts. href is used in anchor tags in standard HTML pages, and routerLink is used in Angular.

  • In standard HTML applications, the href attribute in the anchor tag is employed to navigate to other pages or different sections of the same page when the anchor link is clicked by the user.
  • However, it loses the current state after navigating to another page.
  • For instance, if the current page contains an input textbox, using href results in the loss of input value after navigation.
  • Additionally, it reloads the page.

Angular routerLink:

  • routerLink is an Angular attribute that is activated when the anchor tag is clicked, facilitating navigation and reloading of other components or pages.
  • It preserves the current state after navigating to a different page.
  • Unlike reloading the request, it does not trigger a page reload.
  • For instance, if the current page contains an input textbox, routerLink retains the input value after navigation.

Conclusion

In Angular, the href attribute is not supported. Instead, you can explore various methods for navigation, such as using routerLink and event binding with the click event.