(Angular 6) Jquery - возникают проблемы с slideDown и функциями

Question

Я использую jQuery внутри своего углового проекта, и все было цветами и счастьем. За исключением одной крошечной детали, главная страница веб-приложения отображается с дисплеем: ни одна с самого начала ... Я постараюсь выразить это лучше с помощью кода:

    /*Here I have the css for a list (the page is almost 
    entirely this list), and as you can see, the list is not
    displaying, that's because i have jquery code to slideDown
    the list*/


    ul.items li
    {
        background-color: #202020;
        opacity: .8;
        font-size: 25px;
        font-weight: bold;
        color: white;
        display: none;
    };

Вы можете увидеть упомянутый код jquery здесь:

$(document).ready(function(){
  $('a').click(function(){
    $('ul.items li').slideDown("slow")
  }) 
});

Код работает нормально, но я хочу, чтобы он использовался только тогда, когда пользователь заходит на главную страницу после нажатия на ссылку главной страницы внутри сайта. Когда пользователь вводит ссылку в браузере и впервые просматривает веб-сайт, я хочу, чтобы приложение отображало всплывающее окно со списком

Я пытался сделать это с помощью функции вроде:

function fistLook(counter)
{
  var element = document.querySelector("div");
  if (counter == 0)
  {
    element.style.display = 'auto';
  }

};

Но мне не удалось установить этот счетчик или даже вызвать функцию внутри component.html

Поэтому здесь я прошу поддержки, поскольку другие вопросы по этому вопросу не совсем помогли мне. Итак, как мне сделать начальный показ «автоматическим», и после того, как пользователь щелкнет по этой странице, он получит «0»?