How to give access to HTML element based on user name?

Question

I have a button that I need to give permission to a specific user If he logs in into a website. I can do this with *ngIf on the HTML file but I would like to give the HTML element an id and then do the permission operation on the .ts file.

<ul class="navbar-nav float-right" *ngIf="user.name === 'John'" >
  <li class="nav-item" >
    <a class="nav-link" routerLink="Private">Private</a>
  </li>
</ul>

Thanks in advance.

Answer 1

HTML

 <ul class="navbar-nav float-right" id="ulPrivate">
      <li class="nav-item" >
        <a class="nav-link" routerLink="Private">Private</a>
      </li>
    </ul>

TS

const el: HTMLElement = document.getElementById('ulPrivate');
el.setAttribute("style", "color:red; border: 1px solid blue;");

Obviously change the style to "display:none" or "display:block" depending on the appropriate privacy condition: user.name === 'John'

References:

Declaring an HTMLElement Typescript

How to set multiple CSS style properties in typescript for an element?