I decided to implement a reusable header for my app. Here's how I went about it:
First, I created the component (app-header):
app-header.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: 'app-header.html'
})
export class AppHeaderComponent {
text: string;
constructor() {
console.log('Hello AppHeaderComponent Component');
this.text = 'Hello World';
}
}
This component has the following HTML structure:
app-header.html:
<div>
{{text}}
</div>
Next, I added the AppHeaderComponent to the declarations array in my @NgModule:
...
import { AppHeaderComponent } from '../components/app-header/app-header';
@NgModule({
declarations: [
MyApp,
TabsPage,
AppHeaderComponent
],
...
Since I'm using TabsTemplate and want to include this header in every tab, I placed it in my feed.html file (one of the tabs):
<app-header></app-header>
<ion-content>
...
However, I encountered the following error:
Uncaught Error: Template parse errors: 'app-header' is not a known element: 1. If 'app-header' is an Angular component, then verify that it is part of this module. 2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" -->
[ERROR ->]
To address this issue, I modified the app-header.ts as follows:
import { Component, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: 'app-header.html'
})
@NgModule({
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppHeaderComponent {
text: string;
constructor() {
console.log('Hello AppHeaderComponent Component');
this.text = 'Hello World';
}
}
Even after making this change, the error persisted.
Any suggestions on how to resolve this?
Update:
Since I am using Tabs, here's a snippet from my code:
tabs.ts:
import { Component } from '@angular/core';
import { FeedPage } from '../feed/feed';
import { AboutPage } from '../about/about';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tabFeed = FeedPage;
tabAbout= AboutPage;
constructor() {
}
}
And tabs.html:
<ion-tabs>
<ion-tab [root]="tabFeed" tabIcon="paper"></ion-tab>
<ion-tab [root]="tabAbout" tabIcon="search"></ion-tab>
</ion-tabs>
Each tab loads a page, like feed.html which was mentioned earlier.
For better organization, I have structured my code in the following way:
Furthermore, the components.modules.ts includes:
import { NgModule } from '@angular/core';
import { AppHeaderComponent } from './app-header/app-header';
@NgModule({
declarations: [AppHeaderComponent],
imports: [],
exports: [AppHeaderComponent]
})
export class ComponentsModule {}