2

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?

  • Take a look at [this question](https://stackoverflow.com/q/41458842/1009922). – ConnorsFan Feb 09 '18 at 17:38
  • It depends how your modal is actually opened. You can use click and in that method, do the same thing that/similar thing the JavaScript of that modal is doing. – David Anthony Acosta Feb 09 '18 at 17:41
  • Yes it really depends on how you open your modal. If it is just a boolean and the modal exists on that html page, the flipping the switch with the click event is all you need to do. – RockGuitarist1 Feb 09 '18 at 17:49
  • Pretty unclear how that link open a modal, is it a custom modal if so what is your implementation on how the modal open? Bootstrap? use their javascript functions to open the modal. – penleychan Feb 09 '18 at 17:49
  • @Craig2018 I updated my answer. If you're looking to create a modal, just open it inside of that openModal function instead of redirecting to a url... let me know if that helps! – Kyle Krzeski Feb 09 '18 at 17:52

3 Answers3

1

Do something like this:

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

In openModal:

openModal() {
  window.location.href = 'yoururl';
}
Kyle Krzeski
  • 6,183
  • 6
  • 41
  • 52
0

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.

KavehG
  • 303
  • 1
  • 2
  • 11
  • I downvoted for `window: any = window;` Why would you ever write such a thing? Its supposed to be `window = window;` – Aluan Haddad Feb 10 '18 at 01:19
  • Do you think the purpose of writing in TypeScript is to be able write more code so you can get worse tooling than it would provide you in a JavaScript file? Seriously. – Aluan Haddad Feb 10 '18 at 01:28
  • 2
    @AluanHaddad, TypeScript is a superset of JavaScript which primarily provides optional static typing, classes and interfaces. One of the big benefits is to enable IDEs to provide a richer environment for spotting common errors as you type the code. And clarifying your code by specifying types and adding comment is not writing more code, Your logic tends to minification your source code which is not helpful at all. – KavehG Feb 10 '18 at 08:20
  • 2
    By the way this is a SO answer and it's main purpose is make the idea clear. Now if you've got a bunch of negative votes to spend on accepted answers feel free to downvote. But does it really satisfy you by bringing such an irrelevant and not so accurate claim? seriously?? – KavehG Feb 10 '18 at 08:38
  • Sorry but you have no idea what you're talking about. Let the compiler infer the correct type `Window` or write the correct type `Window`. Your code is completely ridiculous. I can't believe you would defend it because it's absurd. What possible intent are you conveying? Are you trying to say you don't know what the type of the window object is? The compiler knows, until you tell it to forget and at the same time suppress all errors and prevent intellisense. – Aluan Haddad Feb 10 '18 at 10:11
  • Sorry for being harsh, but you really need to learn the language before you start answering questions. – Aluan Haddad Feb 10 '18 at 10:16
  • @AluanHaddad there's a link to an article in the answer [link](https://juristr.com/blog/2016/09/ng2-get-window-ref/) in which the exact code is used. And tell him he needs to learn the language before being a Google Developer Expert in Web Tech, tech writer, author, Egghead.io instructor, .... Or maybe, admit that you've learned something. – KavehG Feb 10 '18 at 11:09
  • Well then, I rest my case! – KavehG Feb 10 '18 at 11:12
  • https://juristr.com/blog/2016/09/ng2-get-window-ref/#comment-3751585548 don't rest your case, learn TypeScript. Hopefully he will update his post as result of my comment. Unfortunately, angular developers tend to use TypeScript poorly. That doesn't mean that you have to do that. – Aluan Haddad Feb 10 '18 at 11:27
  • How to handle this in .ts on click event. Its causing change in route in address bar. – Mahi Mar 15 '20 at 19:11
-1

Check out ng-bootstrap, it's a pretty powerful tool for adding pre-built user interface components to your app, I've used this one before and it worked pretty well. The setup can be a little confusing but their documentation helps.

https://ng-bootstrap.github.io/#/components/modal/examples

Jacob Goodwin
  • 56
  • 4
  • 1
    I don't really want to depend on an extra library to do such a small task. Can Angular itself not do this? –  Feb 09 '18 at 17:43