Prevent navigation if the URL is empty

I am dealing with a calendar class that has a URL property which sometimes may be null. I want to prevent users from navigating if the URL is null (as it currently navigates to the root URL).

This is what I have:

<a href="{{calendar.url}}" target="_blank">{{ 'Home.calendar.readMore' | translate }} <i class="fa fa-angle-right"></i></a>

So, I decided to change the href to:

<a href="{{calendar.url == null ? 'javascript:void(0);' : calendar.url}}" target="_blank">{{ 'Home.calendar.readMore' | translate }} <i class="fa fa-angle-right"></i></a>

However, this now generates the following URL:

<a _ngcontent-evn-15="" target="_blank" ng-reflect-href="unsafe:javascript:void(0);" href="unsafe:javascript:void(0);">

Any suggestions on what I can do in this situation?

angulartypescript

Answer №1

To utilize the preventDefault function, simply return false within `(click)="..."`

<a href="{{calendar.url}}" (click)="!!clendar.url"

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

Exploring the variance between inlineSourceMap and inlineSources within the TypeScript compiler options

According to the documentation: --inlineSourceMap and inlineSources command line options: --inlineSourceMap will include source map files within the generated .js files rather than in a separate .js.map file. --inlineSources allows for the source .t ...

typescript

Error: TypeScript is unable to find the property URL within the specified type. Can you help

Currently, I am honing my skills in TypeScript and encountering a problem. I am a bit confused about how to define the type for the URL when I am setting the mix here. Obviously, the URL is supposed to be a string, and this specific scenario is within the ...

javascriptreactjstypescript

What are the steps to expand the WebSocket interface using the 'ws' library?

I am struggling to extend an interface in a library and I need some help. I am trying to extend the WebSocket interface from the ws library. ... declare class WebSocket extends events.EventEmitter { ... } declare namespace WebSocket { ... } export ...

typescript

The specified instant cannot be located in 'moment' while attempting to import {Moment} from 'moment' module

Struggling in a reactJS project with typescript to bring in moment alongside the type Moment Attempted using import moment, { Moment } from 'moment' This approach triggers ESLint warnings: ESLint: Moment not found in 'moment'(import/n ...

javascriptreactjstypescriptmomentjs

Ionic2 - fetching information from the server without receiving the response

Struggling with retrieving accurate data from the server for my mobile app in Ionic2 and Angular2. I created a basic PHP script on my website to echo '1' when data is sent to the server, but I'm getting the entire response instead of just th ...

phpangularionic2

Experimenting with Jest testing for a Component or Service that includes the use of "declare var" functionality

During the testing of my component or service, an error has occurred: ReferenceError: flagPath is not defined The variable flagPath is sourced from a configuration file named config.js within the assets folder. Is there a method to incorporate it into ...

angulartestingjestjsconfig

Troubleshooting Issue with Angular Property Binding for Image Dimensions

Currently, I am exploring property binding in Angular through an example. The idea is to use an image and bind its width, height, and src attributes using property binding. Surprisingly, even though there are no errors and the image renders successfully vi ...

javascripthtmlangularproperty-binding

Can the NgModule objects be imported from an external file?

One of my goals is to streamline the organization of my app by putting everything into logical files. I frequently do this in C#. Is there a way to extract declarations into a separate file and then assign the value to the declarations variable on NgModule ...

angular

A notification won't appear unless the window is clicked

After creating the GlobalHandlerError service, I noticed that errors are being displayed properly in the console. However, when I added angular-notifier, notifications only show up after a mouse click in the current window. Each notification requires a s ...

angularservice

Unable to resolve the FormGroup when using the FormBulider

Currently, I am facing an issue while working with FormBuilder and FormGroup in Angular 2. When I try to submit a form, the form.value that is passed is of type FormGroup. After trying to access my properties and then restarting the lite server, the app f ...

angular

Integrate guidelines into JSON stringify

I am working with a class called OrderParameterInfo: class OrderParameterInfo { Name: string; Value: string; My goal is to create a JSON string. When I use JSON.stringify(OrderParameterInfo("foo_name", "foo_value")), it generates {&quo ...

jsontypescript

Exploring the world of Unicode in Angular

I need to search for pokemon and retrieve all Pokémon results (with the accent included) This is my array: let games = ['The Legend of Zelda', 'Pokémon', 'Chrono Trigger'] This is how I am attempting to do it: Using HTML ...

angulartypescript

"Angular 6: A Guide to Customizing Text Colors Based on Status

I have a view on angular just like this: https://i.sstatic.net/JimWN.png And this is my dashboard.component.ts: export class DashboardComponent implements OnInit { tablePresetColumns; tablePresetData; ngOnInit() { this.tablePresetColumns = [{id: ...

htmlcssangularlessangular6

The global declaration of Typescript is only accessible within the node_modules/@types directory

Scenario As I develop an npm package using Typescript, I include types that are shipped alongside the library in the following structure: my-package |- index.js |- index.d.ts |- package.json The index.d.ts file includes global declarations like: declare ...

typescriptnpmglobaltypescript-typingsdefinitelytyped

JavaScript causing Google custom search to not refresh results when updating search query

I am inputting user IDs into a textbox in my system. Upon submitting the ID, it fetches the name and address of the user and places it in the search box of a GCSE. document.getElementById("gsc-i-id1").setAttribute("value", this.searchqu ...

javascriptjqueryangulargoogle-custom-searchgoogle-search-api

Show a stylish container when the server encounters an HTTP error with status code 500

My approach for error handling involves a straightforward ErrorHandler class structured like this: export class AppErrorHandler implements ErrorHandler { handleError(error : any){ //console.log('test error ', error.status); ...

htmlangularerror-handling

*ngFor is not rendering the array data and no error is being shown

Currently utilizing mongoDB's $filter aggregation feature, which has successfully generated the expected output from my query. However, I am encountering an issue with my HTML code as *ngFor is not displaying the data and no errors are being shown in ...

node.jsangularmongodbtypescriptexpress

What is the best way to ensure the website theme remains consistent after a refresh in React?

I am currently enhancing a weather forecast website by incorporating a theme toggler feature. The functionality has been successfully implemented, but I am facing an issue where the selected theme does not persist after reloading the page. Can someone he ...

javascriptreactjstypescript

Converting a string into an array of objects using Angular TypeScript

Can anyone help me with converting the following string into an array of objects? {"Car": "[" {"Carid":234,"CompanyCode":null}"," {"Carid":134,"CompanyCode":"maruti"}"," {"Carid":145,"CompanyCode":"sedan"}"," "]" } I attempted using JSON.parse, ...

jsonangulartypescript

Time grid - powered by momentjs and typescript

https://i.sstatic.net/Xzggb.png Welcome! If you're looking to add a day picker in a calendar, keep reading for my solution. ...

typescriptmatrixcalendarmomentjs