4

When I am writing this, the MDN shows that HTMLDialogElement is supported in all browser except Internet Explorer. But weirdly enough, while using it, there is a warning which says it's not supported in most of the browsers and marks it depreceted. That was not the problem, until I found that calling showModal() is giving me error:

Property 'showModal' does not exist on type HTMLDialogElement

Am I missing something?

Here is my code:

let elem: HTMLDialogElement = document.getElementById("dlg") as HTMLDialogElement;
elem.showModal(); // this line gives error
Muzib
  • 2,412
  • 3
  • 21
  • 32
  • 2
    According to the type definitions for `HTMLDialogElement` there is no method `showModal()`. You could cast `elem` to `any` to make the TypeScript Transpiler accept it: `(elem as any).showModal()`. However, you should not use deprecated APIs ;) If you are using Material with Angular you could use the `MatDialog` service instead. – majusebetter Jun 02 '22 at 16:20
  • 1
    Also these types doesn't come from Angular. They are defined by [typescript](https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts). – Kamil Chlebek Jun 02 '22 at 16:24
  • 1
    @majusebetter, thanks. that worked !! You can put it in the answer box for me to mark it as accepted answer – Muzib Jun 02 '22 at 16:40
  • you shouldn't use `document` while using Angular, use `ElementRef` or 'Render2', Angular should be the only interacting with the DOM – Andres2142 Jun 02 '22 at 17:23
  • @Andres2142 just followed this to avoid the ceremony: https://stackoverflow.com/a/46516373/4648930 – Muzib Jun 02 '22 at 17:26

2 Answers2

3

According to the type definitions (lib.dom.d.ts) for HTMLDialogElement there is no method showModal(). You could cast elem to any to make the TypeScript Transpiler accept it:

(elem as any).showModal()

However, you should not use deprecated APIs. If you are using Material with Angular you could use the MatDialog service instead.

majusebetter
  • 1,458
  • 1
  • 4
  • 13
2

HTMLDialogElement.showModal is available as of TypeScript 4.8.3.

Run npm install --save-dev typescript@4.8.3.

Trevor Karjanis
  • 1,485
  • 14
  • 25