Angular 5 - Using (click) instead of <a href="#target"></a>

Question

I have a link which opens a modal dialog:

<a href="#openModal">Open Modal</a>

But I want to use angular (click) or similar to open the modal instead.

How can I do this?

Answer 1

Maybe this is what you are looking for, You can reference the window object inside you component:

 private window: any = window;

and then in your template use this:

 <button (click)="window.location.href = '#openModal'">Open Modal</button>

but remember as described here

Referencing global browser objects like document or window directly from within your code is possible, but not encouraged and considered bad practice.

and it's recommended that you register WindowRef as provider.

Answer 2

Do something like this:

<button (click)="openModal()">Open Modal</button>

In openModal:

openModal() {
  window.location.href = 'yoururl';
}