{

Angular Anchor click event tutorials & Examples


In this blog post, we are going to learn how to bind the click event to the anchor tag.

Angular Tutorials - Example about an anchor bind tag click event without a href

Anchor bind tag click event example 

In Angular applications, We have anchor tags used for following places

  • Navigate to a different pages
  • Navigate to a div or sections of page, for example, top,bottom, specific div
  • Add/remove HTML elements dynamically

In non Angular applications, We have a href tag to navigate to other pages.

Can we use href attribute in Angular application?

href is not supported in Angular, But you can use property binding event, for example attach click event to it , write a navigation code in click binding event.

How do you navigate without 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 ng CLI command. This example not covers how to create an angular application.

Anchor click event without href

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

In HTML template file, please add anchor tag with click event like 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 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 other page or moving from one position to another position in a single page.

This can be achieved using anchor href attribute in legacy javascript and jquery apps.

In Angular application, same can be achieved with routerLink 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 a angular component that has a link, when user clicked on it, It opens new link url in new browser tab or new window.

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

This can be easy and simple to use in angular component.

This can be done two ways.

Using click event handler- windows.open accepts first parameter as link url and second optional parameter contains 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 many ways as follows.

First way is to use 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>

Third way use ngClass directive

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

How do you disable anchor tag with click event?

This is an example for doing disable programmatically

Declare an variable- isDisable in a typescript component and initialized with false.

In the click event, update isDisable 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 first link, 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>
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.