Property 'app' does not exist on type 'AppComponent'

Question

I am new to angular working on a CRUD app . Aim is to download mongoDB data to Excel via angular using a download button. While building that ,I am getting this error
Error in in src/app/app.component.html:28:26 - error TS2339 Property 'app' does not exist on type 'AppComponent'.

code
app.component.html

<div>
  <nav class="navbar navbar-expand navbar-dark bg-dark">
    <a href="#" class="navbar-brand">HOME</a> #bezKoder
    <div class="navbar-nav mr-auto">
      <li class="nav-item">
        <a routerLink="tutorials" class="nav-link">Tutorials</a>
      </li>
      <li class="nav-item">
        <a routerLink="add" class="nav-link">Add</a>
      </li>
    </div>
    
    <a style="cursor: pointer" (click)="exportexcel()">
      
    </a>
  </nav>

  <div class="container mt-3">
    <router-outlet></router-outlet>
  </div>
</div>>
<table id="excel-table"> 
  <tr>       
     <th>title</th> 
     <th>description</th>  
        
  </tr>    
  <tr *ngFor="let sup of app">
  // This is the binding part. 
     <td>{{ sup.title }}</td>  
     <td>{{ sup.description }}</td> 

  </tr>

app.component.ts

import { Component } from '@angular/core';
import * as XLSX from 'xlsx'; 


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular10Crud';
  /*name of the excel-file which will be downloaded. */ 
fileName= 'tutorials_data.xlsx';  

exportexcel(): void 
    {
       /* table id is passed over here */   
       let element = document.getElementById('excel-table'); 
       const ws: XLSX.WorkSheet =XLSX.utils.table_to_sheet(element);

       /* generate workbook and add the worksheet */
       const wb: XLSX.WorkBook = XLSX.utils.book_new();
       XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

       /* save to file */
       XLSX.writeFile(wb, this.fileName);
  
    }
}

You might have a reference of app somewhere in your component. — Jai
You did not define app property in component.ts. You just have title and fileName properties available. — Saghi Shiri

Shahzad Shahzad · Accepted Answer · 2020-09-21T13:15:40

The error message is pretty self-explanatory. You are using app in <tr *ngFor="let sup of app"> but there is no property named app in your app.component.ts.

You have probably forgotten to put it there. So just create the app property (which i assume is meant to be an array).

Property 'app' does not exist on type 'AppComponent'

1 Answers