Chamar e fechar modal usando apenas o TypeScript

[Shmu 0]

Estou iniciando uns estudos com o TypeScript e estou usando ele em uma aplicação minha que está sendo desenvolvida com o .NET Core Razor.

 

Eu estou precisando de fazer um código em que abra um modal Bootstrap usando apenas o TypeScript. Sem o jQuery...

 

Eu não sei como fazer isso, nao achei função que outras pessoas ja fizeram para isso, apenas com o Angular(que eu nao estou usando). Mas agora estou precisando.

 

Espero que me ajudem nessa. Eu tentei fazer usando "display", mas não consegui.

 

A questão é o seguinte. Eu preciso fazer um <select> em que se o usuario escolher a opção "Sim", abrirá o modal com algumas opções a serem preenchidas, e ao mesmo tempo terei um botão(caso a opção seja "sim"), para ele clicar e poder mudar oque colocou nas opçoes do modal.

 

Como eu tentei fazer:

<div class="modal fade d-none" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Título do modal</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary">Fechar</button>
                    <button type="button" class="btn btn-primary">Salvar mudanças</button>
                </div>
            </div>
        </div>
    </div>


<select class="form-control w-100" id="data_test" onchange="modalOpen()">
  <option value="NA">Não analizar</option>
  <option value="S">Sim</option>
  <option value="N">Não</option>
</select>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalExemplo">
  Abrir modal de demonstração
</button>

function modalOpen() {
    if ((<HTMLInputElement>document.getElementById("data_test")).value == "S") {
        (<HTMLInputElement>document.getElementById("modalExemplo")).classList.remove("d-none");
    } else {
        (<HTMLInputElement>document.getElementById("modalExemplo")).classList.add("d-none");
    }
}

Já que estou usando o Bootstrap, por que não usar a classe "d-none"? Então tentei fazer desta maneira... mas não funcionou

[gabrielms 0]

@Shmu Bom esse código vai abrir exatamente com o método modal() do bootstrap Js faz, só falta você passar ele para o TypeScript.

function modal(elemento)
{
	let modal, overlay;
    
    modal = document.getElementById(elemento);
    
    if (modal.classList.contains("show"))
    {
    	overlay = document.getElementsByClassName("modal-backdrop");
    	modal.classList.remove("show");
        modal.style.display = "none";
        if (overlay.length > 0)
        {
        	overlay = overlay[0];
            overlay.parentNode.removeChild(overlay);
        }
    }
    else
    {
        overlay = document.createElement("div");
        overlay.classList.add("modal-backdrop", "fade", "show");
        document.getElementsByTagName("body")[0].appendChild(overlay);
        modal.style.display = "block";
        setTimeout(() => {modal.classList.add("show");}, 25);
    }     
    
}