title: I' cant display variable of my object in html in Angular
body: <p>I have problem with display values of object config in html (I think so).</p>
  <p>This is my component:</p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
    config: { [key: string]: string | Date } | null = null;
  
    constructor() {
      setTimeout( () =&gt;{
        this.config = {
          title: 'ToDo-List',
          footer: ' © footer from component',
          date: new Date()
      };}, 500);
  
    } 
  }
  </code></pre>
  <p>And this is html part:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;nav class=&quot;row&quot;&gt;
      &lt;div class=&quot;nav-wrapper&quot;&gt;
        &lt;span class=&quot;brand-logo center&quot;&gt;{{config.title}}&lt;/span&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;div class=&quot;row&quot;&gt;
      &lt;button class=&quot;btn col s2 offset-s10&quot;&gt;Add new-task&lt;/button&gt;
      &lt;button class=&quot;btn col s2 offset-s10&quot;&gt;End&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div class=&quot;row&quot;&gt;
      &lt;input
        class=&quot;col s8&quot;
        type=&quot;text&quot;
        placeholder=&quot;Dodaj zadanie i datę wykonania&quot;
      /&gt;
      &lt;input class=&quot;col s2 disabled&quot; type=&quot;date&quot; /&gt;
      &lt;button class=&quot;btn-floating&quot;&gt;+&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;ul class=&quot;collection&quot;&gt;
      &lt;li class=&quot;collection-item row&quot;&gt;
        &lt;span class=&quot;col s10&quot;&gt;1 Pool - 11.07 &lt;/span&gt;
        &lt;div class=&quot;col s2 right-align&quot;&gt;
          &lt;button class=&quot;btn-floating btn-small red&quot;&gt;
            &lt;i class=&quot;material-icons&quot;&gt;remove&lt;/i&gt;
          &lt;/button&gt;
          &lt;button class=&quot;btn-floating btn-small green ml-5&quot;&gt;
            &lt;i class=&quot;material-icons&quot;&gt;check&lt;/i&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class=&quot;collection-item row&quot;&gt;
        &lt;span class=&quot;col done&quot;&gt;Clean a bathtub&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;h1&gt;No tasks for today :-)&lt;/h1&gt;
  
    &lt;button class=&quot;btn red&quot;&gt;Clear&lt;/button&gt;
  
    &lt;footer class=&quot;page-footer mt-5&quot;&gt;
      &lt;div class=&quot;footer-copyright&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
          {{config.date}}
          {{config.footer}}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I think that problem is with initialization of object config but I can't figure where.
  Each time I get error TS2339: Property 'title' does not exist on type 'AppComponent'.</p>
  <p>I use Angular 13 and material.</p>