CODEWITHSUNDEEP
tabsangularcomponents
Scobee
Scobee

Reputation: 448

Load component in tab template

I am trying to create an application that has two bottom navigation tabs, and each one will be a different component

This is my code:

import {Page} from 'ionic-angular';
import {Component} from 'angular2/core';
import {ckAutoLoanCalculator} from '../../components/ckAutoLoanCalculator/ckAutoLoanCalculator';

@Page({
    template: `<ion-navbar *navbar class="contact_navbar">
                    <ion-title>Loan calculator</ion-title>
                </ion-navbar>
                <ion-content><ck-auto-loan-calculator></ck-auto-loan-calculator></ion-content>`,
})
class CompareRates {}

@Page({
  templateUrl: 'build/pages/home/home.html',
  directives: [ckAutoLoanCalculator],
})

export class Home {
    loan_calculator: any;
    compare_rates: any;

    constructor() {
        this.loan_calculator = LoanCalculator;
        this.compare_rates = CompareRates;
    }
}

As you can see, I am trying to load ck-auto-loan-calculator component when clicking on the Loan calculator tab .. but it does not load the content, although I can see <ck-auto-loan-calculator> inside the content Do I need to trigger something, or ?

Upvotes: 1

Views: 397

Answers (3)

Scobee
Scobee

Reputation: 448

It was actually export class CompareRates {} what I needed

Upvotes: 0

Thierry Templier
Thierry Templier

Reputation: 202176

I would include the ckAutoLoanCalculator class into the page that actually uses it, in your case the CompareRates one:

@Page({
  template: `
    <ion-navbar *navbar class="contact_navbar">
      <ion-title>Loan calculator</ion-title>
    </ion-navbar>
    <ion-content>
      <ck-auto-loan-calculator></ck-auto-loan-calculator>
    </ion-content>
  `,
  directives: [ckAutoLoanCalculator]
})
class CompareRates {}

and not the Home one.

Upvotes: 1

Sean Larkin
Sean Larkin

Reputation: 6420

It looks like you are missing the import for your custom tab component.

In Angular2, to pass the class reference to the directives property, you need to make it available in that files 'variable scope'

import {ckAutoLoanCalculator} from './path/to/component'

Upvotes: 1

Related Questions