Don't allow navigate if url is null

Question

I have calendar class which has url property and sometimes it might be null. I don't want to allow user navigate if url is null (then it navigates to root url);

I have this:

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

So I change 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>

But now it generates url

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

What can I do?

Answer 1

You can use preventDefault by returning false in `(click)="..."

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