Angular: Identifier 'title' is not defined. 'never' does not contain such a member. Unusual problem

Question

Im following a tutorial but I got stuck. not sure why I'm getting an error. error on visual studio code is "Identifier 'title' is not defined. 'never' does not contain such a member" for both post.title and post.content

<mat-accordion multi=True *ngIf="posts.length > 0">
  <mat-expansion-panel *ngFor="let post of posts">
    <mat-expansion-panel-header>
      {{ post.title }}
    </mat-expansion-panel-header>
    <p>
      {{ post.content }}
    </p>
  </mat-expansion-panel>
</mat-accordion>
<p class="info-text mat-body-1" *ngIf=" posts.length <= 0" > no posts added yet</p>

and in app.component.ts I am getting an error: "Parameter 'post' implicitly has an 'any' type" and "Argument of type 'any' is not assignable to parameter of type 'never' "

this specific error is at the onPostadded

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ang-project';

  storedPost = [] ;

  onPostAdded(post) {
    this.storedPost.push(post);
  }
}

let me know if I need to show more code of different files. I would appreciate any help I can get.

EDIT: the for the function "*ngFor="let post of posts", Posts for some reason is type never: (property) PostListComponent.posts: never[]

I am not sure why it is like that.

I should add that posts variable is a const array.

import {Component, EventEmitter} from '@angular/core'

@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.component.html',
  styleUrls: ['./post-create.component.css']
})
export class PostCreateComponent {
  enteredContent = '';
  enteredTitle = '';
  postCreated = new EventEmitter();

  onAddPost() {
    const posts = {
      title: this.enteredTitle,
      content: this.enteredContent
    };
    this.postCreated.emit(posts);
  }
}

this is post-list-component.ts

import { Component, Input } from "@angular/core";

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})


export class PostListComponent {
  // posts = [
  //   {title:'first post', content:'this is the first post'},
  //   {title:'second post', content:'this is the second post'},
  //   {title:'third post', content:'this is the third post'}
  // ];

  @Input() posts: IPost[] = [];

I'm getting an error: " Cannot find name 'IPost' "

Answer 1

I d'ont know if this:

<mat-accordion multi=True *ngIf="posts.length > 0">
  <mat-expansion-panel *ngFor="let post of posts">
    <mat-expansion-panel-header>
      {{ post.title }}
    </mat-expansion-panel-header>
    <p>
      {{ post.content }}
    </p>
  </mat-expansion-panel>
</mat-accordion>
<p class="info-text mat-body-1" *ngIf=" posts.length <= 0" > no posts added yet</p>

is the template of AppComponent . But if it is, so don't check *ngIf="posts.length > 0" should be *ngIf="storedPost.length > 0" , *ngIf="posts.length <= 0" should be *ngIf="storedPost.length <= 0" and *ngFor="let post of posts" should be *ngFor="let post of storedPost" . Because you add your post on submission in storedPost

Answer 2

//This is how you add interface
interface IPost {
 title: string;
 content: string;
}

export class PostListComponent {
  @Input() posts: IPost[] = [];
}

Angular now generates a project with strict mode by default and you have to specify types for variables, Maybe the tutorial is old or they have disabled strict mode.

Read this you will get idea