How to open modal window in typescript?

Question

Angular

Hello everyone, this is the question. There is a dialog in the component, like this:

<div class="modal modal-primary" id="ms-account-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog animated zoomIn animated-3x" role="document">
            <div class="modal-content">
                <div class="modal-header d-block shadow-2dp no-pb">
                    <button type="button" class="close d-inline pull-right mt-2" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">
                            <i class="zmdi zmdi-close"></i>
                        </span>
                    </button>
                    <div class="modal-title text-center">
                        <img height="50" width="50" src="../../wwwroot/assets/img/logo.png" alt="">
                        <h3 class="no-m ms-site-title">
                            <span>CounterBot</span>
                        </h3>
                    </div>
                    <div class="modal-header-tabs">
                        <ul class="nav nav-tabs nav-tabs-full nav-tabs-2 nav-tabs-primary" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a href="#ms-login-tab" aria-controls="ms-login-tab" role="tab" data-toggle="tab" class="nav-link active withoutripple">
                                    <i class="zmdi zmdi-account"></i> Вход
                                </a>
                            </li>

                            <li class="nav-item" role="presentation">
                                <a href="#ms-recovery-tab" aria-controls="ms-recovery-tab" role="tab" data-toggle="tab" class="nav-link withoutripple">
                                    <i class="zmdi zmdi-key"></i> Восстановление
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane fade active show" id="ms-login-tab">
                            <form autocomplete="off">
                                <fieldset>
                                    <div class="form-group label-floating is-empty">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="zmdi zmdi-account"></i>
                                            </span>
                                            <label class="control-label" for="loginInput">Логин</label>
                                            <input type="text" [(ngModel)]="loginInput" name="loginInput" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group label-floating is-empty">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="zmdi zmdi-lock"></i>
                                            </span>
                                            <label class="control-label" for="passwordInput">Пароль</label>
                                            <input type="password" [(ngModel)]="passwordInput" name="passwordInput" class="form-control">
                                        </div>
                                    </div>
                                    <button (click)="Login();" class="btn btn-raised btn-block btn-primary">Войти</button>
                                </fieldset>
                            </form>
                        </div>

                        <div role="tabpanel" class="tab-pane fade" id="ms-recovery-tab">
                            <fieldset>
                                <div class="form-group label-floating is-empty">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="zmdi zmdi-assignment"></i>
                                        </span>
                                        <label class="control-label" for="ms-form-id">Номер заказа (В комментарии к оплате)</label>
                                        <input type="text" id="ms-form-id" class="form-control" [(ngModel)]="numberInput">
                                    </div>
                                </div>

                                <div class="form-group label-floating is-empty">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="zmdi zmdi-balance-wallet"></i>
                                        </span>
                                        <label class="control-label" for="ms-form-wallet">Кошелек (С которого совершалась оплата)</label>
                                        <input type="text" id="ms-form-wallet" class="form-control" [(ngModel)]="walletInput">
                                    </div>
                                </div>
                                <button (click)="Recovery();" class="btn btn-raised btn-block btn-primary">Восстановить</button>
                            <div style="text-align: center;" *ngIf="messageRecovery.length>0">
                                <br />
                                <label style="color: red;" class="control-label">{{messageRecovery}}</label>
                            </div>
                            <div *ngIf="loginRecovery.length>0">
                                <div class="form-group label-floating">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="zmdi zmdi-assignment"></i>
                                        </span>
                                        <label class="control-label" for="ms-form-login-recovery">Логин</label>
                                        <input type="text" id="ms-form-login-recovery" class="form-control" [(ngModel)]="loginRecovery">
                                    </div>
                                </div>
                                <div class="form-group label-floating">
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="zmdi zmdi-assignment"></i>
                                        </span>
                                        <label class="control-label" for="ms-form-pass-recovery">Пароль</label>
                                        <input type="text" id="ms-form-pass-recovery" class="form-control" [(ngModel)]="passwordRecovery">
                                    </div>
                                </div>
                            </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

it opens like this:

<a href="javascript:void(0)" class="withripple" data-toggle="modal" data-target="#ms-account-modal">
                    <i class="zmdi zmdi-account"></i> Вход
                </a>

The question is how to open using typescript in angular? You need to open a window and change the tab (tab) to id="ms-recovery-tab"

Answer 1

Guys, help)

Answer 2

Is it bootstrap? Include jQuery and bootstrap.js. Or include ngx-bootstrap. Or write your own implementation with reference to native elements and taking into account all options.