How to use ngIf to hide Links?

Question

I’ll tell you directly what I need, then I’ll go into my problem further.

I need to hide this link from edit, how can I do this with ngIF?

<div class="col-lg-4">
        <h1>{{ title }}</h1>
        <div class="siderbar-admin" data-simple-id="simples-nav-stacked">
            <ul class="nav nav-pills nav-stacked nav-pills-stacked-example">

                <li role="presentation" [routerLinkActive]="['active']">
                  <a [routerLink]="['list-restaurant']">Lista</a>

                </li>
                <li role="presentation" [routerLinkActive]="['active']" >
                    <a [routerLink]="['add-restaurant']" >Adicionar</a>

                </li>
                <li role="presentation" [routerLinkActive]="['active']">
                     <a [routerLink]="['Edit/:id']" >Editar</a>

                </li>

            </ul>
        </div>
    </div>


    <div class="col-lg-8">
      <router-outlet></router-outlet>
    </div>

Let’s go for detailed explanation, look at the image below;

As you may notice there is a link to list, add and edit, but when I leave the list to the Link edit without clicking the edit button of the page list the system generates an error, because the edit was loaded without the registry id. To avoid these problems it would be important that Link edit is showing only when the user clicks on the edit button on the list, I’ll try to explain again.

How I need the system to behave ?

On the screen below show only list and add, and only show the edit link when the user navigates to the page list and click the edit button.

I know the theoretical workings of ngIF looking through the documentation, but despite everything the documentation did not make me have ideas on how to solve this.

THIS IS MY REPOSITORY