Страница не размывается при открытии диалога

Моя js-функция:

function Example() {
    var x = document.getElementById("Dialog");
    var y = document.getElementById("example1")
    x.show();
    y.className = "is-blurred";
}

Мой HTML-код:

 <div *ngIf = "id!==1 && id!==2" id = "example1" >
      <div class = "float-left bosluk">
       <a onclick = "Example()" >
        <button pButton type = "button" label = " ABC " class = "ui-button-rounded ui-button-secondary"></button>
        </a>
      </div>
</div>

    <dialog id = "Dialog">
     .
     .
     .

    </dialog>

У меня две отдельные кнопки. Каждый вызывается отдельно и направлен на разные страницы. Поэтому я пытаюсь запустить id, дающий id. мой код тоже работает. но вы заметили, что я использую "*ngIf" выше. Если у меня нет статуса, соответствующего id моих кнопок, я написал, чтобы остаться на главной странице. Но если я совпадаю с любым идентификатором, функция js работает. Эта функция открывает диалог. Поскольку диалог открыт (я не в состоянии, которое я написал с помощью * ngIf), идентификатор не попадает в div с примером 1, а задняя часть диалога не размывается.