Why ng-show is not hiding a div and its content into my page?

Gi everyone, I am very new in Angular and I am finding the following problem trying to hide a div and its content into a view. I am trying to use the NgShow directive as explained in this tutorial: https://scotch.io/tutorials/how-to-use-ngshow-and-nghide

I have the following situation. Into a component I have a view named mail-datail-protocollo-sidebar.component.html. It contains a div on which I have setted the ng-show directive, something like this:

<div class="info-box" ng-show="showSelectAOOUORLists">
    <div class="title-box">Lista AOO</div>
    <p-dropdown placeholder="Selezionare un AOO"
                [options]="aooList"
                [(ngModel)]="selectedAoo"
                optionLabel="Name"
                (onChange)="onChangeAoo($event)">
    </p-dropdown>

    <div *ngIf="selectedAoo">
        <div class="title-box" style="margin-top: 20px;">Lista UOR</div>
        <p-dropdown placeholder="Selezionare un reparto relativo all'AOO selezionato"
                    [options]="uorList"
                    [(ngModel)]="selectedUor"
                    optionLabel="UnitaOperativaResponsabile">
        </p-dropdown>
    </div>


    <div style="margin-top: 28px; width: 30%">
        <button *ngIf="selectedUor"
                type="button"
                pButton icon="fa-stamp"
                label="Invia al protocollo"
                (click)="inviaProtocollo($event)"></button>
    </div>

</div>

As you can see I setted ng-show="showSelectAOOUORLists" so in theory it should use the value of the boolean variable named showSelectAOOUORLists defined into the related controller class.

Then I have the controller class of the previous view, named mail-datail-protocollo-sidebar.component.ts that contains this boolean variable used to show or hide the previous div:

@Component({
    selector: 'mail-detail-protocollo-sidebar',
    templateUrl: '/app/maildetail/mail-detail-protocollo-sidebar/mail-datail-protocollo-sidebar.component.html',
    styleUrls: ['../../app/maildetail/mail-detail-protocollo-sidebar/mail-detail-protocollo-sidebar.component.css']
})
export class MailDetailProtocolloSidebarComponent implements OnInit {

    showSelectAOOUORLists: boolean;
    .........................................................
    .........................................................
    .........................................................

    constructor(
        private mailsService: MailsService,

        private mailDetailProtocolloService: MailDetailProtocolloService
    ) { }

    ngOnInit(): void {
        this.showSelectAOOUORLists = false;
        ...............................................................
        ...............................................................
        ...............................................................
    }

    .........................................................
    .........................................................
    .........................................................
}

So, as you can see, basically at the moment I am setting to false the value of the showSelectAOOUORLists variable (into the ngOnInit(), so in theory before that the page is rendered) to hide the div and its content.

The problem is that this div is still shown on the page.

Why? What is wrong? What am I missing? How can I fix this behavior? Use ng-show is the correct way to do it?

ng-show and ng-hide are supported from Angular v1.x.x but in your code you're using an Angular version higher than 1 which ng-show/ng-hide are not supported.

Use [hidden] or *ngIf instead to show and hide your div

Example:

<div class="info-box" [hidden]="!showSelectAOOUORLists">

or 

<div class="info-box" *ngIf="showSelectAOOUORLists">