CODEWITHSUNDEEP
angularionic-frameworkionic3
LooPer
LooPer

Reputation: 1479

Angular component not rendered

I am trying to create a custom component as header of all pages. I generated it using CLI command

ionic generate component BPNavbar

bp-navbar.html

<ion-header>
    <ion-navbar>
        <button ion-button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title text-left>LISTADO DE OFERTAS</ion-title>
        <ion-buttons end> 
            <button id="notification-button" ion-button clear (click)="openCart()">
                <ion-icon name="cart">
                    <ion-badge id="notifications-badge" color="danger">17</ion-badge>
                </ion-icon>              
            </button>        
        </ion-buttons>
    </ion-navbar>
</ion-header>

bp-navbar.ts

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

@Component({
    selector: 'bp-navbar',
    templateUrl: 'bp-navbar.html'
})
export class BpNavbarComponent {

    text: string;

    constructor() {
        console.log('Hello BpNavbarComponent Component');
        this.text = 'Hello World';
    }

}

components.module.ts

import { NgModule } from '@angular/core';
import { BpNavbarComponent } from './bp-navbar/bp-navbar';
@NgModule({
    declarations: [BpNavbarComponent],
    imports: [],
    exports: [BpNavbarComponent]
})
export class ComponentsModule {}

If I add tags 

<bp-navbar></bp-navbar>

in one html page file I don't get any printed. I don't get any error.

Any idea why is not being rendered?

Upvotes: 0

Views: 1737

Answers (1)

Alex Steinberg
Alex Steinberg

Reputation: 1466

While I don't know the details behind it, this is caused by the ion-header element being inside your component. Remove it from the component and place it on the page, and it should work. Each HTML page will then begin:

<ion-header>
  <bp-navbar></bpnavbar>
</ion-header>

Upvotes: 1

Related Questions