The Angular component 'ExpenseEntryComponent' does not have a property named 'expenseEntry' defined

  1. I'm following a tutorial to create an expense entry app, which can be found on page 33 of this tutorial link.

I encountered the following error - Property 'expenseEntry' does not exist on type 'ExpenseEntryComponent'. I've looked into these resources:

a) Angular error TS2339 Property does not exist on type

b) Angular - How to fix 'property does not exist on type' error?

but I didn't find a clear solution.

  1. Here is my expense-entry.ts file:

import { Component } from "@angular/core";
import { OnInit } from "@angular/core";

export interface ExpenseEntry { 
    id: number; 
    item: string; 
    amount: number; 
    category: string; 
    location: string;
    spendOn: Date; 
    createdOn: Date;
}
@Component({
    template: ''
  })
export class ExpenseEntryComponent implements OnInit{
    title: string;
    expenseEntry: ExpenseEntry;
    constructor(){ }

    ngOnInit(){
        this.title = "Expense Entry";
        this.expenseEntry = {
            id: 1, 
            item: "Pizza",
            amount: 21, 
            category: "Food", 
            location: "Zomato", 
            spendOn: new Date(2020, 6, 1, 10, 10, 10), 
            createdOn: new Date(2020, 6, 1, 10, 10, 10),
        };

    }
}

  1. Here is my expense-entry.component.ts file:

import { Component, OnInit } from '@angular/core';
import {ExpenseEntry} from '../../app/expense-entry/expense-entry'

@Component({
  selector: 'app-expense-entry',
  templateUrl: './expense-entry.component.html',
  styleUrls: ['./expense-entry.component.css']
})
export class ExpenseEntryComponent implements OnInit {
  title: string | undefined;
  constructor() { }

  ngOnInit(): void {
    this.title = "Expense Entry";
  }
  

}

  1. Here is my expense-entry.component.html file:

<!------------------content------->
<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center" style="padding-top: 20px;">
            <div class="container" style="padding-left: 0px; padding-right:0px;">
                <div class="row">
                    <div class="col-sm" style="text-align: left;">{{title}}  </div>
                    <div class="col-sm" style="text-align: right;"> <button type="button" class="btn btn-primary">Edit</button>
                    </div>
                </div>
            </div>
            <div class="container box" style="margin-top: 10px;">
                <div class="row">
                    <div class="col-2" style="text-align: right;"> <strong><em>Item :</em></strong></div>
                    <div class="col" style="text-align: left;">{{expenseEntry.item}}</div>
                </div>
                <div class="row">
                    <div class="col-2" style="text-align: right;"> <strong><em>Amount :</em></strong></div>
                    <div class="col" style="text-align: left;">{{expenseEntry.amount}}</div>
                </div>
                <div class="row">
                    <div class="col-2" style="text-align: right;"> <strong><em>Category :</em></strong></div>
                    <div class="col" style="text-align: left;"> food</div>
                </div>
                <div class="row">
                    <div class="col-2" style="text-align: right;"> <strong><em>Location :</em></strong></div>
                    <div class="col" style="text-align: left;">{{expenseEntry.location}}</div>
                </div>
                <div class="row">
                    <div class="col-2" style="text-align: right;"> <strong><em>Spend on :</em></strong></div>
                    <div class="col" style="text-align: left;">{{expenseEntry.spendOn}} </div>
                </div>
            </div>
        </div>
    </div>
</div>

  1. Inserting {{expenseentry.item}} causes an error. I've tried restarting the server but it doesn't seem to work.
javascriptangulartypescriptdata-bindingframeworks

Answer №1

When working with the expense-entry.ts file, remember that it should only export an interface. Be cautious of creating multiple components with the same name.

Here is an example of what the expense-entry.ts file might look like:

export interface ExpenseEntry { 
   id: number; 
   item: string; 
   amount: number; 
   category: string; 
   location: string; 
   spendOn: Date; 
   createdOn: Date; 
}

If you want to use this ExpenseEntry interface in your ExpenseEntryComponent.ts file, make sure to import it correctly:

import { ExpenseEntry } from '../expense-entry';

@Component({
  selector: 'app-expense-entry',
  templateUrl: './expense-entry.component.html',
  styleUrls: ['./expense-entry.component.css']
})

export class ExpenseEntryComponent implements OnInit { 

   title: string; 
   expenseEntry: ExpenseEntry; 
   constructor() { } 

   ngOnInit() { 
      this.title = "Expense Entry"; 
      this.expenseEntry = { 
         id: 1, 
         item: "Pizza", 
         amount: 21, 
         category: "Food", 
         location: "Zomato", 
         spendOn: new Date(2020, 6, 1, 10, 10, 10), createdOn: new Date(2020, 6, 1, 10, 10, 10), 
      }; 
   } 
}

Answer №2

Upon reviewing your code briefly, I've noticed that the ExpenseEntryComponent class is referenced in two different files and the expense-entry.component.ts file does not contain a member named expenseEntry, whereas it is present in the expense-entry.ts file.

To resolve this issue, consider modifying or removing the conflicting code snippet.

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

Adding Angular directives to the DOM after the document has finished loading does not function properly in conjunction with ngAnimate

I've been working on developing an Angular service that can dynamically append a notification box to the DOM and display it without the need to manually add HTML code or write show/hide logic. This service, named $notify, can be used as follows: $no ...

javascriptjqueryhtmlcssangularjs

Is it possible to save ng-bind values into a PHP string?

As a newcomer to AngularJS with some PHP knowledge, I am curious about the possibility of storing ng-bind values in a PHP string. For instance: <li ng-if="jSEO.resources[3][0][0]"> <span> Internal Links:</span> <font color="#000000" ...

javascriptphpangularjs

Guide on how to include a parent key in JSON within a React application

In my current web application setup, I am using Rails as the backend and React as the frontend. The data entered by users in HTML forms is transmitted between the applications in JSON format. However, there seems to be an issue with the format of the JSON ...

javascriptruby-on-railsjsonreactjs

Having trouble accessing the value of a node in JavaScript, as it keeps returning as "null"

Experimenting with converting HTML elements into lists. The objective is to generate a list of all values in a table upon clicking the "page next" buttons on it. Afterward, an alert should display the value of the first item in the list, which corresponds ...

javascriptjqueryhtmllistnodes

Creating a material texture with file api in three.js is a straightforward process

I have a vision to create a cutting-edge model browser that allows users to handpick models and textures themselves. In order to achieve this, I am utilizing the File API for smooth file handling. My approach involves using two separate file inputs for rec ...

javascriptthree.js

Perform a JSON POST request from an HTML script to a Node.JS application hosted on a different domain

In an attempt to send string data via a post json request using JavaScript within an .erb.html file, I am facing the challenge of sending it to a node.js app on another domain that uses express to handle incoming requests. After researching online, I have ...

javascriptruby-on-railsjsonnode.js

Adding a JavaScript file to enhance the functionality of an AJAX response

In my project, I have implemented a dropdown that triggers an AJAX call each time an option is selected. The AJAX call returns HTML markup containing buttons, text boxes, and a script tag. The buttons in the HTML markup use this script tag to submit data t ...

javascriptjqueryhtmlajax

Switch Cursor on Movable Area in Electron

Working on a project in Electron and having some trouble with a frameless window. I have designated certain top areas as draggable using -webkit-app-region: drag, but the cursor will not change as expected. Although this code snippet won't make the e ...

javascriptcsselectronelectron-builder

Purging the internal buffer of the node stream

Utilizing Node Serialport, I've implemented an event listener to check the data streaming through the connection for correct units. If the units don't match what the user has set, I utilize the .pause() method to pause the stream and inform the u ...

javascriptnode.jseventsserial-port

Request denied due to CORS policy, despite setting Access-Control-Allow-Origin to *

My console is showing an error when I try to make a POST request on my website. The error states: Access to XMLHttpRequest at 'https://exp.mysite.com/i_l' from origin 'https//frontend.mysite.com' has been blocked by CORS policy: Respons ...

angulartypescriptexpresscors

Efficient ways to retrieve row values and remove data using DataTables

I am facing an issue with my DataTable setup. I have a column dedicated to details with a delete button within an href tag. However, when I try to add a class name or id to it, I encounter an error. You can view the example here. My goal is to be able to ...

javascriptjqueryhtmldatatablesbootstrap-4

Tips for concealing material input

In my usual practice, when I need a form field to be part of the submission but not visible, I typically use <input type="hidden" /> However, when working with matInput, the option for a type of hidden is not available. While I could apply display: ...

angulartypescriptangular-material

Arranging an array of objects in Angular based on the value inside each object

How can I retrieve objects by filtering the key value within the object? In the example below, I need to extract data only with session_id:23. data = [{ name: "First Name", session_id : "23", login: "date" }, { name: "Second Name", ...

javascripthtmljsonangularangular6

Creating variables and constants using {variableName} explained

Recently, I've been watching some JavaScript videos where people create variables using syntax like const {variable} = something. router.delete('/:movieId', async function(req,res, next){ //delete const {movieId} = req.params; //req.pa ...

javascriptnode.jsexpress

What is the best way to cycle through sprite positions within an array?

Having a string array containing the sprites to display: var lts = [ "letterA", "letterB", "letterC", "letterD", "letterE", "letterF" ]; These sprites are loaded in assets.js: function loadAssets(callback){ function loadSpri ...

javascriptarrayshtml5-canvassprite

Tips for avoiding parent div click interference in Angular

Working with Angular8, I have a div containing a routelink along with other components including a checkbox. Here's the structure: <div [routerLink]="['/somewhere', blablabla]"> <!--other components that navigate to the ro ...

javascriptangular

Managing Prisma error handling in Express

Dealing with error handling using ExpressJS and Prisma has been a challenge for me. Anytime a Prisma Exception occurs, it causes my entire Node application to crash, requiring a restart. Despite looking at the Prisma Docs and doing some research online, I ...

node.jstypescriptexpressbackendprisma

Creating a new ES-6 class to extend express-js: Issues with binding getter and setter properties

I am intrigued by the idea of utilizing Express within an extended class. My goal is to create getter and setter methods for a property, but I'm facing the issue of these methods not being bound to the instances as desired. One way to work around this ...

javascripttypescriptexpressbindinges6-class

Create a unique Bootstrap 5 carousel featuring a single progress bar

Hey guys, I'm having some trouble with my Bootstrap 5 carousel. I want to add a progress bar with left and right arrows, and also the number of slides displayed, just like in this image: https://i.sstatic.net/pqOMy.jpg I did some research and found ...

javascriptprogress-barcarouselbootstrap-5

Angular's DecimalPipe will truncate any strings that exceed 10 digits

Using the decimal pipe to format numbers in an input field value| number:'0.0-6': 'en-us' When working with numbers containing more than 10 digits, it displays as follows: For 11111111111.123456, it formats to 11,111,111,111.123455 ...

angulartypescriptangular-pipe