0

I try to make a see more button to get more search results at the moment of clicking.

I have my header in separate arrchivos and I use it with:

<ion-header>
  <page-header> </page-header>
</ion-header>

For each view.

The button that generates the event is in a search-modal.html like this:

  <div (click)="seeMoreResults($event)">
    <button color="primary" block>see more</button>
  </div>

And the search-modal.ts controller looks like this:

Import {Component, EventEmitter, Output} from '@ angular / core';

@Component({
  selector: 'page-search-modal',
  templateUrl: 'search-modal.html',
})
export class SearchModalPage {

@Output()
public updateSearchResults = new EventEmitter();

seeMoreResults(event) {
    this.countSearchResult = Object.keys( this.searchResult ).length; // "this.searchResult" are the search results that arrive when something is typed.
    this.updateSearchResults.emit( this.countSearchResult );
}

The header.html has this:

<ion-toolbar (updateSearchResults)='updateSearchResults($event)'>
// Here is my search bar.
</ion-toolbar>

And my header.ts has:

updateSearchResults(lastTotal){
  this.search((10+lastTotal), lastTotal, true);
  // "search" is the method that makes me search and issues the result.
}

The first search is working fine, that's why I omitted the code. But when I click the "see more" button it does not emit anything, I tried to put a console.log("Run"); inside updateSearchResults of header.ts but never prints.

Any idea why it is?

Sorry for the translation, I speak Spanish.

Faber_Hozz
  • 1
  • 1
  • Did something happen to your code while copy-pasting? There seems to be a lot of extra spaces, some of them syntax errors. – Matti Virkkunen Jun 23 '17 at 17:21
  • Is the emitting component the immediate child of the receiving component? Angular events only up one level? – The Head Rush Jun 23 '17 at 17:33
  • The code has been modified by the translation I made using google. I am sorry. But I checked the syntax in my code and everything is fine. I'm going to copy directly from my code to here. I will comment when this is done. – Faber_Hozz Jun 23 '17 at 18:34
  • Ok, I already copied the code. – Faber_Hozz Jun 23 '17 at 18:41

1 Answers1

0

The (updateSearchResults) Output needs to be bound on the component it's Outputed on, namely page-search-modal (according to your code). i.e.

<page-search-modal (updateSearchResults)='updateSearchResults($event)'>
// Here is my search bar.
</page-search-modal
Jack Guy
  • 8,346
  • 8
  • 55
  • 86
  • But in my header call I already have one ` page-header>` Nothing happens if I leave it this way: ` page-header>` PD: I tried it, and it did not work for me. – Faber_Hozz Jun 23 '17 at 18:30
  • @Faber_Hozz it shouldn't be on your `page-header`, it should be on your `page-search-modal` - where you defined it the output. Your code as it stands wouldn't work - if that's not the code you actually have then we can't really help you. :\ – Jack Guy Jun 24 '17 at 00:39