Angular component not rendered

Question

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?

just added 'import { ComponentsModule } from '../components/components.module';' into app.module.ts without effect — LooPer
– LooPer, Commented Jun 15, 2018 at 12:44

Alex Steinberg · Accepted Answer · 2018-06-15 15:19:43Z

1

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>

answered Jun 15, 2018 at 15:19

Alex Steinberg

1,46614 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular component not rendered

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related