I am trying to source my header into a component out and getting errors. How can I outsource my head-CodePudding

I would like to outsource my headers as a separate component in my Ionic 4 project so that I can reuse this component.

My Try:

My dashboard page on which I want to display my header

<ion-header>
  <app-header title="Dashboard"></app-header>
</ion-header>

My header.component.html

<ion-header class="test">
  <ion-toolbar class="header-background-color">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title id="dashboaerdheadline">
      {{lablesHeadlines.dashboard}}
    </ion-title>
  </ion-toolbar>
</ion-header>

Here in the dashboard.module.ts I added the component

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { DashboardPageRoutingModule } from './dashboard-routing.module';
import { DashboardPage } from './dashboard.page';
import { MapComponent } from '../map/map.component';
import { HeaderComponent } from '../header/header.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    DashboardPageRoutingModule
  ],
  declarations: [DashboardPage, MapComponent, HeaderComponent]
})
export class DashboardPageModule {}

When I start my app then I get the following errors:

My Console (Errors)

core.js:6210 ERROR TypeError: Cannot read properties of undefined (reading 'dashboard')
    at HeaderComponent_Template (template.html:16)
    at executeTemplate (core.js:9600)
    at refreshView (core.js:9466)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshEmbeddedViews (core.js:10591)
defaultErrorLogger @ core.js:6210
core.js:6210 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'dashboard')
TypeError: Cannot read properties of undefined (reading 'dashboard')
    at HeaderComponent_Template (template.html:16)
    at executeTemplate (core.js:9600)
    at refreshView (core.js:9466)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at renderComponentOrTemplate (core.js:9580)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:28564)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
defaultErrorLogger @ core.js:6210
13core.js:6210 ERROR TypeError: Cannot read properties of undefined (reading 'dashboard')
    at HeaderComponent_Template (template.html:16)
    at executeTemplate (core.js:9600)
    at refreshView (core.js:9466)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshEmbeddedViews (core.js:10591)
defaultErrorLogger @ core.js:6210
client:52 [WDS] Live Reloading enabled.
113core.js:6210 ERROR TypeError: Cannot read properties of undefined (reading 'dashboard')
    at HeaderComponent_Template (template.html:16)
    at executeTemplate (core.js:9600)
    at refreshView (core.js:9466)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshEmbeddedViews (core.js:10591)
defaultErrorLogger @ core.js:6210
10core.js:6210 ERROR TypeError: Cannot read properties of undefined (reading 'dashboard')
    at HeaderComponent_Template (template.html:16)
    at executeTemplate (core.js:9600)
    at refreshView (core.js:9466)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshEmbeddedViews (core.js:10591)
defaultErrorLogger @ core.js:6210
handleError @ core.js:6258
(anonymous) @ core.js:29570
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:28506
tick @ core.js:29570
(anonymous) @ core.js:29439
invoke @ zone-evergreen.js:364
onInvoke @ core.js:28577
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
run @ core.js:28461
next @ core.js:29438
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:25926
checkStable @ core.js:28514
onLeave @ core.js:28627
onInvokeTask @ core.js:28571
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCaptureCallback @ zone-evergreen.js:1679

What am I doing wrong and how can I solve it? Am still very new to Angular/Ionic.

UPDATE 1 This is my environment lables.ts

export const lablesHeadlines = {
  dashboard: 'Karte',
  
};

UPDATE 2

import { Component, OnInit } from '@angular/core';
import { lablesHeadlines } from 'src/environments/lables';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

}

UPDATE 3

ERROR TypeError: Cannot read properties of undefined (reading 'dashboard')
    at HeaderComponent_Template (template.html:16)
    at executeTemplate (core.js:9600)
    at refreshView (core.js:9466)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshComponent (core.js:10637)
    at refreshChildComponents (core.js:9263)
    at refreshView (core.js:9516)
    at refreshEmbeddedViews (core.js:10591)

CodePudding user response：

Your import is correct but you can't access it the way you did. Try to save the imported variable to a new variable inside your HeaderComponent:

import { Component, OnInit } from '@angular/core';
import { lablesHeadlines } from 'src/environments/lables';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {

  headlines = labelsHeadlines;

  constructor() { }

  ngOnInit() {}

}

Then you can access this new variable from inside your HTML-template:

<ion-header class="test">
  <ion-toolbar class="header-background-color">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title id="dashboaerdheadline">
      {{ headlines.dashboard }}
    </ion-title>
  </ion-toolbar>
</ion-header>

If you load the component, it should then show Karte and the error should be resolved.

UPDATE:

To dynamically adjust the title you need to pass it in as an Input-property:

<app-header [headline]="headlines.dashboard"></app-header>

Therefore you also need to adjust your HeaderComponent:

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {

  @Input("headline");
  headline: string;

  constructor() { }

  ngOnInit() {}

}

CodePudding user response：

Try adding HeaderComponent to the app.component.ts