[Fixed] I cannot get the a property of component(post) in the app component using Output and EventEmitter in Angular

Issue

it says argument of type any is not assignable.
Am I supposed to import something else in the app.component?
Could you please tell what am I doing wrong?
app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test';
  posts=[];
  onAddedPost(post){
    this.posts.push(post)
  }
}

here is the problem. the post in onAddedPost is the problem.
post-create.component.ts

import { sharedStylesheetJitUrl } from '@angular/compiler';
import { Component, EventEmitter, Injectable, Output, OutputDecorator } from '@angular/core';
@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.component.html',
  styleUrls: ['./post-create.component.css']
})
export class PostCreateComponent {
  enteredContent='';
  enteredTitle='';
  @Output() postCreated = new EventEmitter();
  onAddPost(){
    const post={title:this.enteredTitle,content:this.enteredContent};
    this.postCreated.emit(post);
  }

}

app.component.html

<app-header></app-header>
<main>
<app-post-create (postCreated)="onPostAdded($event)" ></app-post-create>
<app-post-list [posts]="storedPosts"></app-post-list>
</main>

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent,
      HeaderComponent,
      PostListComponent
   ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
    MatToolbarModule,
    MatExpansionModule,

  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

Solution

Most probably it’s a TSLint error since it couldn’t infer the type. Note: this would not affect the app as compiled JS would not have sense of the TS types.

However to solve it you could define a Typescript Interface of the type.

1. Define a model

post.ts

export interface Post {
  title?: string;
  content?: string;
}

2. Use this model to define type in both the components.

post-create.component.ts

import { sharedStylesheetJitUrl } from '@angular/compiler';
import { Component, EventEmitter, Injectable, Output, OutputDecorator } from '@angular/core';

import { Post } from './post';

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

  @Output() postCreated: EventEmitter<Post> = new EventEmitter<Post>();

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

app.component.ts

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

import { Post } from './post';

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

  onAddedPost(post: Post) {
    this.posts.push(post);
  }
}