How to access to document instance from typescript

Issue

The essence of the problem in the next, there is a project that decided to rewrite under Angular 6, in the project there is a lateral navigation panel. The robot of this panel is written in JS (This code found on some site). I'm not strong at JS, and in Angular I have little experience. Tell me how you can rewrite this code to work with Angular.

navigation panel

JS

$(document).ready(function() {
  $('.time-button').click(function() {
    if ($(this).hasClass('open')) {
      $(this).removeClass('open').addClass('closed');
      return $('.time-panel').animate({
        'right': '-253'
      }, 260);
    } else {
      $(this).removeClass('closed').addClass('open');
      return $('.time-panel').animate({
        'right': '0'
      }, 260);
    }
  });
});

html

<div class="time-panel">
  <div class="content">
    <h5 class="d-flex justify-content-center"><span class="badge badge-success">Режим просмотра</span></h5>
    <div class="d-flex justify-content-center btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
      <label class="btn btn-outline-success btn-control active">
                <input type="radio" name="options" id="real-time" autocomplete="off" checked> Реальное</br>время
            </label>
      <label class="btn btn-outline-primary btn-control">
                <input type="radio" name="options" id="archive" autocomplete="off"> Просмотр</br>архива
            </label>
    </div>
    <h5 class="d-flex justify-content-center mt-3"><span class="badge badge-primary">Навигация по архиву</span></h5>
    <div class="d-flex">
      <div class="pr-1">
        <span class="text-uppercase">Пост</span>
        <div class="input-group input-group-sm">
          <select class="custom-select" id="storageBox">
            <option selected>Выбрать</option>
            <option value="1">ЭЦ-1</option>
            <option value="2">ЭЦ-2</option>
            <option value="3">ГП-1</option>
            <option value="4">ГП-2</option>
            <option value="5">ГП-3</option>
          </select>
        </div>
      </div>
      <div class="pl-1">
        <span class="d-flex justify-content-end text-uppercase">Интервал</span>
        <div class="input-group input-group-sm">
          <select class="custom-select" id="intervalBox">
            <option selected>Выбрать</option>
            <option value="1">1 час</option>
            <option value="2">30 минут</option>
            <option value="3">10 минут</option>
            <option value="4">5 минут</option>
            <option value="5">1 минута</option>
          </select>
        </div>
      </div>
    </div>
    <div class="d-flex flex-column  mt-1">
      <span class="d-flex justify-content-center text-uppercase">Дата и время просмотра</span>
      <div class="form-group">
        <div class="input-group date" id="dateTimePicker" data-target-input="nearest">
          <input type="text" class="form-control datetimepicker-input" data-target="#dateTimePicker" />
          <div class="input-group-append" data-target="#dateTimePicker" data-toggle="datetimepicker">
            <div class="input-group-text">
              <i class="fa fa-calendar" title="Выбор даты и времени просмотра"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d-flex mt-1">
      <button type="button" title="Перемотать назад" class="btn btn-sm btn-outline-primary btn-control" id="prevButton">
                <i class="d-flex align-items-center justify-content-center material-icons">keyboard_arrow_left</i>
            </button>
      <button type="button" title="Применить выбранные параметры" class="btn btn-sm btn-outline-primary ml-1 mr-1" id="queryButton">
                <i class="d-flex align-items-center justify-content-center material-icons">autorenew</i>
            </button>
      <button type="button" title="Перемотать вперед" class="btn btn-sm btn-outline-primary  btn-control" id="nextButton">
                <i class="d-flex align-items-center justify-content-center material-icons">keyboard_arrow_right</i>
            </button>
    </div>
    <span class="d-flex justify-content-center mt-2 text-uppercase">Вид графика</span>
    <div class="d-flex justify-content-center btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
      <label class="btn btn-outline-primary  btn-control active">
                <input type="radio" name="options" id="option10" autocomplete="off" checked>Классический
            </label>
      <label class="btn btn-outline-primary  btn-control">
                <input type="radio" name="options" id="option11" autocomplete="off">По центру
            </label>
    </div>
  </div>
  <!--Visible button-->
  <div class="time-button" title="Панель навигации по архиву">
    <i class="material-icons">gamepad</i>
  </div>
</div>

css

.time-panel {
  position: fixed;
  top: 177px;
  right: -253px;
  border: 1px solid #0062cc;
  z-index: 100;
}

.time-panel .content {
  width: 250px;
  height: 400px;
  padding: 15px;
  background: #ffffff;
}

.time-panel .time-button {
  position: absolute;
  right: 100%;
  top: -1px;
  background: #0062cc;
  border-bottom-left-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
  cursor: pointer;
}

.time-panel .time-button i {
  color: white;
  padding: 5px;
  font-size: 32px;
}

.btn-control {
  width: 100%;
}

Solution

Nobody will create a ready solution for you. You need to be more accurate in your questions and present some code you have written in order to achieve your goal. Thus you are actually being downvoted. In brief, since angular is a component-based framework, you need to create a component and bind this view + css to this component. But angular is a huge framework and set up can be painful. If you are planning to migrate a full project to angular I would recommend you to use some of the existed templates.

Answered By - OlegI