setTimeOut

[solemn anchor]

I'm learning Angular, and redoing the course. This code from the screenshot is from this course. My code is a bit reworked, with the help of a certain person, because the code from the episode didn't work for me

[steel wagon]

What's the error?

[solemn anchor]

I try

setTimeOut(() => {
  config: {
    [key: string]: string;
  } = {
    title: 'Lista zadań',
    footer: '© Lista Zadań, Angular build app',
    date: new Date().toDateString(),
  };
}

and all code are underline

Now I look up, because I close and open VSCode

[steel wagon]

Try this

export class AppComponent {
  config: Record<string, string>
  constructor() {
    setTimeout(() => {
      this.config = {
        title: 'Lisa Zadan',
      }
    }, 500)
  }
}

[solemn anchor]

it doesn't worked

I changed to the earlier code

 config: {
    [key: string]: string;
  } = {
    title: 'Lista zadań',
    footer: '© Lista Zadań, Angular build app',
    date: new Date().toDateString(),
  };

[steel wagon]

I have updated it

[steel wagon]

can you copy the whole file please

[solemn anchor]

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  config: Record<string, string | Date>
  constructor() {
    setTimeout(() => {
      this.config = {
        title: 'Lisa Zadan',
      }
    }, 500)
  }
}

yes, please

[steel wagon]

https://stackblitz.com/edit/angular-ivy-wmsdv5?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Findex.html

[steel wagon]

Check this

Can you highlight on config and see what error is being complained about.

[steel wagon]

okay I see, change it to this:

config: Record<string, string> | null = null

[solemn anchor]

I changes and HTML file has a underline 'title' yet

[steel wagon]

add *ngIf="config" on nav-wrapper element

[solemn anchor]

nothing

[trim prism]

All previous errors are due to Typescript expecting you to define and initialize data.
For the last one, based on your type, Typescript can't know if there will be a 'title' property.
If you know better, define your config as so: using Record as you did would be only useful for dynamic keys.

[acoustic minnow]

or

config: {
  [key: string]: string;
  title: string;
} 

[steel wagon]

config['title'] or
create a type on config:

interface Config {
  title: string
  footer: string
  date: string
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  config: Config | null = null
}

Your HTML

<div class="nav-wrapper" *ngIf="config">
  {{config.title}}
</div>

[trim prism]

Please review #rules and avoid tagging people randomly. I never used a single chart library so don't know about multiple ones.