CODEWITHSUNDEEP
angular
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12503

ngif causing page to reload - Angular 2

I'm trying to display a component when search results are recieved, causing an event emitter to go off, causing onResultsRecieved() to execute.

However the page just reloads. So I debugged it, and when the code goes into onResultsRecieved(), when it runs this.results.scroll() it causes an exception that says "TypeError: Cannot read property 'scroll' of undefined" and then the page just reloads.

scroll() is a method on the results viewchild.

Why is results undefined? and why does the exception never show in the console, and instead reload the page?

All code involved:

find-page.component.html

<div id="find-page">
   <find-form (onResultsRecieved)="onResultsRecieved($event)"></find-form>
</div>
<results-div #results *ngIf="showResults"></results-div>

find-page.component.ts

import { Component, ViewChild } from '@angular/core';
import { NavbarComponent } from '../shared/navbar.component';
import { FindFormComponent } from '../find-page/find-form.component';
import { ResultsComponent } from '../find-page/results.component';

@Component({
   selector: 'find-page',
   templateUrl: 'app/find-page/find-page.component.html',
   styleUrls: ['app/find-page/find-page.component.css' ],
   directives: [ FindFormComponent, ResultsComponent ]
})
export class FindPageComponent {
   showResults = false;
    @ViewChild('results') results;

     onResultsRecieved(recieved: boolean) {
        if ( recieved ) {
           this.showResults = true;
           this.results.scroll();
        }else {
           this.showResults = false;
        }
  }
}

results.component.ts:

import { Component, AfterViewInit } from '@angular/core';

@Component({
   selector: 'results-div',
   templateUrl: 'app/find-page/results.component.html',
   styleUrls: ['app/find-page/results.component.css' ]
})
export class ResultsComponent implements AfterViewInit {

   ngAfterViewInit() {
ScrollToAnchor.goToTargetBottom("#results-page");
   }

   scroll() {
      ScrollToAnchor.goToTargetBottom("#results-page");
   }
}

results.component.html:

<div id="results-page"></div>

relevant css:

#results-page {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 50px; }

Upvotes: 3

Views: 1523

Answers (1)

Justin Reusnow
Justin Reusnow

Reputation: 290

It appears you are using a form, however, I don't see the actual code attached anywhere so this is just going to have to be an educated guess. I was having a very similar problem (which is how I stumbled across this question), and it was fixed very easily.

When you submit a form it will try to take you to wherever the action attribute defines, even if there is no action attribute (in which case the form simply reloads the current page). To avoid this, add onSubmit="return false;" to your form tag, this will prevent the form from attempting to change the page once the form is submitted.

Hope this helps.

Upvotes: 7

Related Questions