Angular search in model on button click

Question

I have acustom pipe filter that allows me to search in my model the search text and i'm struggling to make it work on button press instead of user input. Right now i'm trying to do it like that:

<input [{ngModel}="SearchText" type="text">

and i create my data like this:

<tr *ngFor="let c for char | filter : SearchText">
 <td> {{c.Name}} </td>
</tr>

So this works.

And now i try to add something like this:

<button type="button" ng-click="searchText = {Name: Ragnar}">Ragnar</button>

And this doesn't work. I also tried:

<button type="button" [{ngModel}="SearchText">Ragnar</button>

But it doesn't seem to read Ragnar too. Any ideas?

Angular 4.

Sajeetharan · Accepted Answer · 2018-01-26 11:04:28Z

2

There are few mistakes

change

From

<input [{ngModel}="SearchText" type="text">

To

<input [(ngModel)]="SearchText" type="text">

and (click) instead of ng-click

<button type="button" (click)="searchText = {Name: 'Ragnar'}">Ragnar</button>

edited Jan 26, 2018 at 11:04

answered Jan 26, 2018 at 10:59

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

6 Comments

John Over a year ago

It says SearchText.ToLowerCase() is not a function. But i can see he's passing [Object Object]. So probably because the search text when i click on the button isn't a string. How can i change it?

lolbas Over a year ago

@John probably because {Name: Ragnar} should be {Name: 'Ragnar'}

Sajeetharan Over a year ago

you need to pass string instead of object just set ragnar

John Over a year ago

It still sends [object Object]

John Over a year ago

yeah it says 2 min. I'll do it. Thanks for the help!

|

Collectives™ on Stack Overflow

Angular search in model on button click

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related