title: attribute binding and ng directive cause unrendered webpage
body: <p>I am learning Angular and I follow the directions and guidance stated in the <a href="https://www.tektutorialshub.com/angular/interpolation-in-angular/" rel="nofollow noreferrer">following tutorial</a>.</p>
  <p>The problem I am facing is, that when I run</p>
  <pre><code>ng serve --open
  </code></pre>
  <p>I do not see the items displayed on the page on the http://localhost:4200/, but I got the page shown in the screenshot below instead.</p>
  <p>I expect to see the items displayed as the code posted below implies.</p>
  <p>Please let me know where my mistake is and how to fix it so I can see the list of items displayed on the webpage.</p>
  <p><strong>app.component.ts</strong>:</p>
  <pre><code>import { Component } from '@angular/core';
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class item {
    code: number;
    name: string;
  
    constructor(code: number, name: string) {
      this.code = code;
      this.name = name;
    }
  
     items = [
      new item(1, 'Mobile'),
      new item(1, 'Laptop'),
      new item(1, 'Desktop'),
      new item(1, 'Printer')
    ]
  }
  </code></pre>
  <p><strong>app.component.html</strong>:</p>
  <pre><code>&lt;p&gt;item&lt;/p&gt;
  &lt;ul&gt;
    &lt;li *ngFor = &quot;let d of items&quot;&gt;
      &lt;p&gt;{{d.code}}&lt;/p&gt;
      &lt;p&gt;{{d.name}}&lt;/p&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p><strong>image</strong>:</p>
  <p><a href="https://i.stack.imgur.com/JCHDr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JCHDr.png" alt="enter image description here" /></a></p>