J.DD J.DD - 4 months ago 70
Javascript Question

Angular 2 : Toggle Boolean based on a condition

I have a searchbar 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.
First I had

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 calcutate the length, that's why I created a variable.

How can I either


  1. Pass the variable 'value' from my Typescript to my HTML so I can use the
    *ngIf="value.length > 2"
    ?

  2. OR do some kind of If / Else in my Typescript, so I can use a single boolean like
    *ngIf="showNames"
    in my HTML ?



Thanks in advance!

Answer

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 > 0">
   <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 = "";

    // ...
}
Comments