I'm facing some difficulties in sourcing my header into a component and encountering errors. Can anyone advise me on how to properly outsource my header?

Looking to streamline my headers in my Ionic 4 project by creating a separate reusable component for them.

Here's how I set up my dashboard page with the header component:

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

This is the code for 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>

In my dashboard.module.ts file, I included the HeaderComponent:

import { NgModule } from '@angular/core';
import { CommonModule } from '@common/common';
import { FormsModule } from '@forms/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 {}

After starting my app, I encountered the following errors:

Error messages displayed in the console:

ERROR TypeError: Cannot read properties of undefined (reading 'dashboard')
...

Any advice on what might be causing this issue and how to resolve it? I'm fairly new to Angular/Ionic development.

UPDATE 1 - environment lables.ts file:

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

UPDATE 2 - Header component TypeScript file:

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 - More detailed error message:

ERROR TypeError: Cannot read properties of undefined (reading 'dashboard')
...

UPDATE 4 - Updated HTML template for the HeaderComponent:

1 <ion-header class="test">
2   <ion-toolbar class="header-background-color">
3     <ion-buttons slot="start">
4       <ion-menu-button></ion-menu-button>
5     </ion-buttons>
6     <ion-title id="dashboaerdheadline">
7       {{headlines.dashboard}}
8     </ion-title>
9   </ion-toolbar>
10 </ion-header>
javascriptangulartypescriptionic-framework

Answer №1

Your import statement is correct, but you need to make a slight adjustment in order to access the imported variable properly. Instead of directly using it, save the imported variable to a new variable within your HeaderComponent:

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

  headlines = labelsHeadlines;

  constructor() { }

  ngOnInit() {}

}

Once you have done this, you can now access the new variable from within 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="dashboardheadline">
      {{ headlines.dashboard }}
    </ion-title>
  </ion-toolbar>
</ion-header>

If you load the component now, it should display "Karte," and the error should be resolved.

UPDATE:

To dynamically update the title, you will need to pass it 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() {}

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The inputs for Node express middleware are unclear and lack definition

I am currently exploring Node.js as a potential replacement for my existing DOT NET API. I have created middleware to enforce basic non-role authorization in my application, but I am encountering compilation problems with the function inputs. Compilation ...

javascriptnode.jsexpress

Getting YQL financial information using jQuery and showing it using the .html() method

Struggling with the .html() function and YQL data pulled issue. Despite data being pulled successfully (as seen in the YQL console), it is not being displayed. Here's the provided code snippet: HTML Section <ul id="TECO-container"> <li ...

javascripthtmljsonyql

Accessing the "this" object in Vue.js components

When executing console.log(this) in the doSomething method, it returns "null". I was expecting console.log(this.currentPage) to display "main", but unfortunately, the "this" object is null.. :( Is there a way to access the value of "main" for currentPage ...

javascriptvue.js

Ways to activate an event based on the dimensions (width/height) of

Exploring ways to implement an if statement based on specific width/height values using this code example. Check out the code snippet here My approach: <p id="confirmation">Try again!</p> <script> if (new dynamicSize.width() < ...

javascriptjquery

Identify the specific element using a designated data attribute

Having trouble figuring out how to select a specific element with a particular data attribute. In my situation, I want to target the a element with class="zoom-image" and data-order-item-id="<?=$order_item_id ?>". Here is the HTML/PHP code snippet ( ...

javascriptjqueryhtml

Generating React components dynamically can bring flexibility and efficiency to the

Looking for a solution to dynamically render different components based on the arguments passed with data. While using regular or React.createElement(Item) works fine, all other options seem to fail. http://jsfiddle.net/zeen/fmhhtk5o/1/ var React = windo ...

javascriptreactjs

Pass an array containing an HTML string to the $.post method in jQuery

I have a problem with displaying HTML content fetched from a PHP script using the jQuery $.post method: $.post('{$site_url}tests/tests/content', params, function (data) { $('#some-div1').html(data[1]); $('#some-div2').htm ...

javascriptphpjqueryhtmljson

Extracting specific attributes from an array to showcase on a single div

example: { "data": [ { "name": "banana", "color": "yellow" }, { "name": "kiwi", "color": "brown" }, { "name": "blueberry", "color": "blue" } ] } Instead of div, I want to use a span for each ...

javascriptjqueryjson

Switch up the CSS file based on the URL route

My project consists of the following files: App.vue, changcolor.vue, config.json, main.js, index.html, xyz.css, abc.css. I need a solution where based on the URL, the appropriate CSS file is applied. For instance, if the URL is "xyz.local.com" then xyz.cs ...

javascriptnode.jsjsonvue.jswhite-labelling

How can material-ui useScrollTrigger be utilized in combination with a child's target ref?

Attempting to utilize material-ui's useScrollTrigger with a different target other than window presents a challenge. The code snippet below illustrates an attempt to achieve this: export default props => { let contentRef = React.createRef(); ...

javascriptreactjsmaterial-ui

Utilizing camera perspective for coordinate system in Three.js

This question may seem basic, but I'm having trouble grasping it. I'm working on a scene using Three.js and the camera setup is as follows: var camera = new THREE.PerspectiveCamera( 85, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera. ...

javascriptthree.js

Using Angular's filter pipe to search within a nested array

We are attempting to implement an angular pipe for filtering a list of sub-items, with the goal of removing parent items if there are no child items present. Here is the HTML code snippet we are using: <div class="row border-bottom item" *n ...

javascriptangulartypescript

Unable to navigate beyond the boundaries of an app

I am currently facing an issue with my authentication service where it redirects to the identity server in case of certain errors. I attempted to achieve this using window.location.href = environment.authCodeFlowIssuer;, however, an error occurred: Ref ...

javascriptangularangular-oauth2-oidc

What could be causing the malfunction of the v-bind attribute?

I am in the process of developing a straight-forward To-Do List application with VueJS. <template> <div> <br/> <div id="centre"> <div id="myDIV" class="header"> <h2 style="margin:5px">M ...

javascriptvue.js

The AutoComplete feature of MaterialUI Component fails to function properly even when there is available data

I am facing an issue with my component as it is not displaying the autosuggestions correctly. Despite having data available and passing it to the component through the suggestions prop while utilizing the Material UI AutoComplete component feature here, I ...

javascriptreactjstypescriptmaterial-ui

When coding in JavaScript, the value of "this" becomes undefined within a class function

I'm facing an issue with my TypeScript class that contains all my Express page functions. When I try to access the class member variable using this, I get an 'undefined' error: class CPages { private Version: string; constructor(ver ...

javascriptnode.jstypescriptexpress

Encountered a problem while attempting to remove node version

When I run the command nvm ls -> v4.3.2 system default -> 4.3.2 (-> v4.3.2) node -> stable (-> v4.3.2) (default) stable -> 4.3 (-> v4.3.2) (default) iojs -> N/A (default) Upon running nodejs --version, it returns v0 ...

javascriptnode.jsnpm

Using local variables from an external HTML file within an AngularJS directive template

Just making sure I am wording my question correctly, but I have not been able to find any information on this specific topic. Imagine I have an AngularJS directive that looks something like this: angular.module( 'example', [] ).directive( ...

javascriptangularjs

Having trouble parsing a JSON string in your JavaScript code?

As a java developer transitioning to JavaScript, I'm faced with the task of parsing a JSON string retrieved from a WebService. Here is the JSON String: { "myArrayList": [ { "myHashMap": { "firstName": "Clara", ...

javascriptjsonweb-servicesparsing

The communication between a Firefox XUL extension and a webpage

Currently developing a Firefox XUL extension and in need of incorporating interaction between the web page and the extension. For instance, whenever a link is clicked on the page, I would like to trigger a function within the XUL extension. Is there any k ...

javascriptfirefoxhtmlxul