How to Use TypeScript to Disable Href in Angular

I've encountered a challenge with disabling an href link using Angular and Typescript, and I'm unsure if my current approach is the right one.

Is there a more optimal way to achieve something like this? I would like it to resemble the red circle in the image below:

https://i.sstatic.net/iWep2.png

typescript

ReadOnlyStyleGuideNotes: boolean;

  ngOnInit() {
    this.ReadOnlyStyleGuideNotes = true;
  }

HTML

<a href="#" 
*ngIf="note.Edited || note.Removed" 
(click)="restoreDefault(note)" 
style="font-size: 12px"
data-disabled="readOnlyStyleGuideNotes">
restore defaults
</a>

CSS class

 a[data-disabled=true] {
  color: currentColor;
  cursor: not-allowed;
  opacity: 0.5;
  text-decoration: none;
}
angulartypescript

Answer №1

By utilizing pointer events None and surrounding the a element with span, you can add cursor functionality.

<span [ngStyle]="{'cursor':readOnlyStyleGuideNotes ? 'not-allowed' :''}"><a 
 [ngClass]="{'disable':readOnlyStyleGuideNotes}" href="#"  
 (click)="restoreDefault(note)" 
 style="font-size: 12px">
 restore defaults</a></span>

css

.disable{
  color: currentColor; 
  opacity: 0.5;
  text-decoration: none;
  pointer-events: none;
}

For an illustration, check out this example:https://stackblitz.com/edit/angular-22f9ts

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using NextJS <Link, mobile users may need to tap twice to navigate

Whenever I use the NextJS <Link tag on my mobile device, I notice that I have to double-tap for the link to actually route to the desired page. Take a look at the code snippet below: <Link href="/methodology" passHref={true} ...

javascriptreactjstypescriptnext.js

The behavior of the dynamically generated object array differs from that of a fixed test object array

I'm facing an issue while trying to convert JSON data into an Excel sheet using the 'xlsx' library. Everything works perfectly when I use test data: //outputs excel file correctly with data var excelData = [{ test: 'test', test2: ...

angulartypescriptxlsxangular8

Problem encountered while directing to a component within Angular

Here is the overview of my directory structure: Directory Structure login.component.ts: import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms ...

angulartypescriptangular-routingangular-router

Exploring the attributes of optional features

Dealing with optional properties can be quite tedious. Consider the object test1 in TypeScript: interface Test { a?: { b?: { c?: { d?: string } } }; } const test1: Test = { a: { b: { c: { d: 'e' } } } }; Handling the absence of each proper ...

javascripttypescript

Nvm does not have the ability to generate an Angular project

Creating an Angular project using nvm has been a bit of a challenge for me. Here are the steps I took: D:\Project1>nvm list The output showed: 14.16.1 Next, I ran the following command. F:\Ashok\Angular\Angular>nvm use 14.16.1 ...

node.jsangularnvm

Guide to waiting for API responses with redux-saga

I have a React-Typescript app with backend calls using React Saga. I'm facing an issue where when one of my frontend functions makes a backend call, the next function starts executing before the previous one finishes. Currently, I'm using the SE ...

javascriptreactjstypescriptredux-saga

The React table column definition inexplicably transforms into a string

When working with react-table in Typescript, I encountered an issue while defining the type for my columns within a custom hook. It seems that when importing the hook and passing the columns to my Table component, they are being interpreted as strings inst ...

reactjstypescriptreact-table

Transforming Angular application into a microfrontend architecture

I've successfully developed an Angular application and now I'm looking to transform it into a microfrontend application using the single SPA approach. Can someone please advise me on the necessary steps to achieve this? Also, I'd appreciate ...

angularmicro-frontendsingle-spa-angular

Find the calculated values within an Angular Material table

I came across this fantastic example of an Angular Material table with checkboxes that fits perfectly with what I want to implement in my application. However, I am facing a challenge - I need to calculate the total value of the checked rows. Specifically, ...

angulartypescriptangular-material

Tips for customizing the appearance of Angular Material select drop down overlay

In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below: .currency-select { position: absolute; top: 5px; right: 80px; z-index: 1000000; color: #DD642A; f ...

htmlcssangularangular-material2

Implementing specific CSS styles for different routes in Angular 5: Use Bootstrap CSS exclusively for admin routes

I am looking to apply Bootstrap CSS only to routes starting with '/admin'. I have enabled lazy loading for both admin and public modules. ...

javascriptangularbootstrap-4angular-router

Debugger for Visual Code unable to locate URL in Microsoft Office Add-in

I recently installed the Microsoft Office Add-in Debugger VS code extension, but I'm having trouble getting it to work despite following the instructions. Every time I try, an error message pops up: https://i.sstatic.net/h2FYs.png Upon inspecting my ...

reactjstypescriptoffice-js

Internet Explorer is throwing unexpected routing errors in Angular 2

I have a spring-boot/angular 2 application that is working perfectly fine on Chrome, Safari, Opera, and Edge. However, when accessed through Internet Explorer, the app directly routes to the PageNotFound component. I have tried adding shims for IE in the i ...

angularinternet-explorertypescriptspring-bootangular2-routing

Enhancing Security and Privacy of User Information with JWT Tokens and NgRx Integration in Angular Application

I'm facing a security concern with my Angular application. Currently, I store user details like isAdmin, isLoggedIn, email, and more in local storage. However, I'm worried about the risks of unauthorized updates to this data, especially since my ...

angulartypescriptjwtngrxngrx-store

Examining Angular tests for window.location.href changes

authenticate() { const url = environment.authenticationEndpoint; window.location.href = url + '/login'; } I have an Angular service file containing the above code which redirects to the login URL. In order to unit test this, I added the foll ...

angularunit-testingjasminekarma-jasmine

Input for uncomplicated changing identifier

I am looking to create types for dynamic keys that will be of type number. I have two similar types defined as follows: type UseCalculatePayments = () => { totalPayments: number; aggregate: number; condition: boolean; }; type UseCalculateCommissio ...

javascriptreactjstypescript

TypeScript requires that when explicitly specifying the return type of a generator, the `Generator.prototype.return` function must accept

I am utilizing a generator function to serve as a consumer for accumulating strings: function *concatStrings(): Generator<void, string, string> { let result = ''; try { while (true) { const data = yield; result += data; ...

typescriptgenerator

An issue occurred when retrieving the input value during a (change) event within a nested *ngFor loop in Angular

Within my table, I have implemented a nested loop using the *ngFor directive: <tbody> <tr *ngFor="let dept of salesTarget; let i = index"> <td>{{dept.dept}}</td> <td *ngFor="let month of monthList; ...

htmlangular

Looking to extract the expiration date from an x509 certificate?

I am currently engaged in a project that involves retrieving and displaying certificate information from an Azure integration account using Angular/Typescript. One of the requirements is to show the decoded public certificate to users to extract important ...

angulartypescriptsslx509

Angular 4 allows you to assign unique colors to each row index in an HTML table

My goal is to dynamically change the colors of selected rows every time a button outside the table is clicked. I am currently utilizing the latest version of Angular. While I am familiar with setting row colors using CSS, I am uncertain about how to manip ...

angulartypescript