{

Angular Anchor click event tutorials & Examples


Angular  Example  an anchor bind tag click event without a href

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 navigate 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, write a navigation code in click binding event. How do you navigate without the href attribute?

You have to write a code to handle the anchor click binding event. Whenever use clicks on 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 for anchor event binding.

You can see my previous about Angular button click event example

Anchor click event without href

Anchor tag has href and clicks event in legacy applications, but href are not supported in Angular application.

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;
  }
}

Using links, You can navigate from one page to another page or move from one position to another position on a single page.

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

In 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)

router link path must be configured in 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 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 link url and the second optional parameter contains the value to open a link same or 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 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 component.css file -

.disable{
  pointer-events:none;
}

And component.html

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

Second way using 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 anchor tag with 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;
  }
}

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

Conclusion

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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.