Angular 2 : Toggle Boolean based on a condition

Question

I have a search-bar and I want to show all the filtered names when the input value length is 2 or longer.

I managed to get the value.length out of the input field. Now I'm stuck. At first I had done:

if (value.length >= 2){
  showNames: true;
}

Default showNames is false. And when the length was 2 or higher, it set to true. So, that's working. Only when the user erases the text, so the value.length is below 2 again, the boolean won't turn false again. I tried if else, but I know that's not correct in Angular 2.

<ion-searchbar (ionInput)="getNames($event)"></ion-searchbar>
<ion-list *ngIf="showNames">
   <ion-item *ngFor="let name of names">
     {{ name }}
   </ion-item>
</ion-list>

I know I can toggle a boolean from a button click, but I just want to toggle it from the length of a value.

*ngIf="value.length >= 2" doesn't work either, because I create the variable 'value' in my Typescript. So in my HTML it's not defined. And I don't want to use the big formula to calculate the length, that's why I created a variable.

How can I either

Pass the variable 'value' from my Typescript to my HTML so I can use the *ngIf="value.length > 2"?
OR do some kind of If / Else in my Typescript, so I can use a single boolean like *ngIf="showNames" in my HTML?

Maximilian Riegler · Accepted Answer · 2016-07-06 14:40:19Z

5

You can bind to the model of the searchbar like this:

<ion-searchbar [(ngModel)]="searchValue" (ionInput)="getNames($event)"></ion-searchbar>
<ion-list *ngIf="searchValue.length >= 2">
   <ion-item *ngFor="let name of names">
     {{ name }}
   </ion-item>
</ion-list>

And in your component define such a variable:

export class ComponentA {
    searchValue: string = "";

    // ...
}

edited Jul 6, 2016 at 14:40

answered Jul 6, 2016 at 14:24

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GMaiolo · Accepted Answer · 2016-07-06 14:29:17Z

0

You could make showNames a function and aim to do *ngIf="showNames()", or if it is that short perform the check right there: *ngIf="value.length >= 2"

edited Jul 6, 2016 at 14:29

answered Jul 6, 2016 at 14:22

GMaiolo

4,6681 gold badge26 silver badges39 bronze badges

Collectives™ on Stack Overflow

Angular 2 : Toggle Boolean based on a condition

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related