Angular Property ‘expenseEntry’ does not exist on type ‘ExpenseEntryComponent’

I am trying to build expense entry app from this tutorial https://www.tutorialspoint.com/angular8/angular8_pdf_version.htm page 33.

I am getting this error – Property ‘expenseEntry’ does not exist on type ‘ExpenseEntryComponent’. i have tried this links

a) Angular error TS2339 Property does not exist on type

b) Angular – How to fix ‘property does not exist on type’ error?

but i didnt get it clearly

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),
        };

    }
}

expense-entry.component.ts file is here

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";
  }
  

}

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>

when i insert {{expenseentry.item}} it shows error. i tried restarting the server but didnt work

Answer

expense-entry.ts will only export interface. You have created two components with same name.

expense-entry.ts :

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

Then in your ExpenseEntryComponent.ts you need to import above interface as below:

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), 
      }; 
   } 
}

Advertisement

Answer