Angular ng-show="false" is not working

Question

First of all, I have searched already for this topic. There are lots of questions of answers for this, but none address my issue. So please, be kind and don't mark this question as duplicate.

I am trying to display and hide an ion-item on my hybrid application. The tests I am doing are done solely on the html side.

<ion-header>
    <ion-navbar color="secondary">
        <ion-title>
            CEPs!
        </ion-title>
    </ion-navbar>
</ion-header>

<ion-content margin>
    <ion-item ng-show="false">{{ item.cep + "\n" + item.logradouro + "\n" + item.complemento + "\n" + item.bairro + "\n" + item.localidade + "\n" +
        item.uf}}
    </ion-item>

    <form margin-top (ngSubmit)="test()">
        <ion-item>
            <ion-input type="number" max="99999999" [(ngModel)]="form.cep" name="form"></ion-input>
        </ion-item>
        <button ion-button type="submit" center>Pesquisar CEP</button>
    </form>
</ion-content>

I set ion-item ng-show as "false", which on editors like the one at W3Schools works correctly. But here it is not working at all. What should I do?

My versions: Ionic: 3.5.0 Cordova: 7.0.1 Angular: 1.6.5

Answer 1

you can use [hidden] intead of ng-show

<ion-item [hidden]="false">

check hidden

Answer 2

You can use *ngIf.

<ion-item *ngIf="false">

Or you can use hidden as @abd Elrahman Telb answered.

<ion-item [hidden]="false">

The difference is *ngIf completely removes content from DOM if the condition meets false. Where as [hidden] (you observe the [] which means one way binding of angular to the property) means hidden attribute will be added if condition meets true which is html property.

Hope it helps :)