Angular 2 Typescript search button does not call method linked by ng-click

Question

I am trying to create a search function which uses text input to search for a corporation using a government http api (https://github.com/usagov/Corporate-Consumer-Contact-API-Documentation).

I have an html page called contact-list.component.html which has a button element on it that, when clicked, calls a function which exists in a component file (contact-list.component.ts). The function should use the string passed in to search using a service I am calling to find the corporation and output the results to an array I can bind to a table.

contact-list.component.html

       <div class='row'>
        <div class='col-md-2'>Enter Corporation Name:
        </div>
        <div class="col-md-4">
            <input type="text"
            [(ngModel)] = 'searchString'/>
            <div><button class='btn btn-primary' ng-click="ContactListComponent.getResults(searchString)">Search</button>
            </div>
        </div>
    </div>
    <div class='row'>

contact-list.component.ts

    getResults(_searchString: string): any{

this._contactService.getContacts(this._searchString)
.subscribe(contacts => this.contacts = contacts,
     error => this.errorMessage = <any>error);

}

The problem is, when I input text and click the button, the console does not show any output and I do not appear to get any results back. In fact, when I replace the code in the getResults() method with

console.log("foo");

nothing displays in the console when I press F12. Any ideas on what I am missing?

Jeremy Thille · Accepted Answer · 2017-08-25 12:33:13Z

1

ng-click is Angular 1's syntax. Use (click)="...".

Besides, you don't need to (and must not) write "ContactListComponent.getResults(searchString)" but only "getResults(searchString)", because you're already in the right component.

Also, you don't need to pass it searchString because it's already available in the component as this.searchString.

So, here's the correct syntax :

(click)="getResults()"

...and in your component :

getResults(): any{
    this._contactService
        .getContacts(this.searchString) // Already available thanks to [(ngModel)]="searchString" 
        .subscribe(...);
}

edited Aug 25, 2017 at 12:33

answered Aug 25, 2017 at 12:27

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

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

4 Comments

y4ucrash Over a year ago

Thank you very much for your help. I made all the fixes you recommend, however, now I get javascript console errors when the button is clicked. The errors reads :::: <<AppComponent.html:14 ERROR TypeError: _co.getResults is not a function at Object.eval [as handleEvent] (AppComponent.html:14) at handleEvent (core.es5.js:11997) at callWithDebugContext (core.es5.js:13458) at Object.debugHandleEvent [as handleEvent] (core.es5.js:13046) at dispatchEvent (core.es5.js:8601) at core.es5.js:9212 at HTMLButtonElement.<anonymous> (platform-browser.es5.js:2651)>>

Jeremy Thille Over a year ago

getResults is not a function? Did you write it at the right place in your component?

y4ucrash Over a year ago

I wrote it after the constructor, inside the exported class called ContactListComponent.

y4ucrash Over a year ago

UPDATE: Edge gives me a different error. It says "ERROR TypeError: Object doesn't support property or method 'getResults'". Chrome and Firefox give the same error mentioned earlier.

y4ucrash · Accepted Answer · 2017-08-26 13:52:42Z

With the help of a friend, I was able to fix the issue. My issue wasn't in any of the files I had previously listed. Rather, I was using selectors in too many component areas throughout my app. What fixed it was I changed my app.component.ts file's component selector property to app-root and instead called my from the app.component.html. This is sort of a fundamental and was something I overlooked. Thanks to anyone who looked into my issue.

Collectives™ on Stack Overflow

Angular 2 Typescript search button does not call method linked by ng-click

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related