Why the HTMLDialogElement in Angular doesn't have showModal() method?

Issue

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

Solution

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.

Answered By - majusebetter