CODEWITHSUNDEEP
ionic-frameworkionic2
Tonye Boro
Tonye Boro

Reputation: 313

Uncaught Error: Template parse errors in ionic when adding navigation

I have this app I am building in Ionic and I tried adding navigation buttons from home page to both login and registration pages but when I add function (click)=”loginPage()” an error occured.

Below is the screenshot of the error:

enter image description here

App.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { RegisterPage } from '../pages/register/register';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginPage,
    RegisterPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    RegisterPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { RegisterPage } from '../register/register';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public navParams: NavParams) { 

  }

  loginPage(){
    this.navCtrl.push(LoginPage);
  }

  registerPage(){
    this.navCtrl.push(RegisterPage);
  }

}

And home.html

<ion-content padding class="home"> 
  <ion-grid>
    <ion-row>
      <ion-col col-12 class="div-two">Welcome</ion-col>
    </ion-row>

    <ion-row justify-content-start>
        <ion-col col-6 class="col">
          <div><button ion-button round (click)=”loginPage()”>Login</button></div>
        </ion-col>
        <ion-col col-6 class="col">
          <div><button ion-button round (click)=”registerPage()”>Register</button></div>
        </ion-col>
  </ion-row>

  </ion-grid>
</ion-content>

I have tried all I could but still don't know what the cause of the error is. i am new to ionic.

Thanks.

Upvotes: 0

Views: 192

Answers (1)

Hyuck Kang
Hyuck Kang

Reputation: 1789

Your double quote charater is invalid. Do not use ”loginPage()” but use "loginPage()".

This sometimes happens when you copy some code to editor directly. Please be careful about that.

Upvotes: 1

Related Questions