Angular 2 error TS2339: Property 'posts' does not exist on type 'BookComponent'

Question

I am learning Angular 2 and am currently blocked by the following error. The variable posts is declared in post.component.ts.

Error: src/app/book.component.html:231:33 - error TS2339: Property 'posts' does not exist on type 'BookComponent'.

231         <li *ngFor="let post of posts">
                                    ~~~~~

  src/app/book.component.ts:9:18
    9     templateUrl: 'book.component.html',
                       ~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component BookComponent.

Here are the relevant components:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BookComponent } from './book.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CustomPipe } from './custom.pipe';
import { ForEmailDirective } from './for-email.directive';
import { PostComponent } from './post/post.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    BookComponent,
    CustomPipe,
    ForEmailDirective,
    PostComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [BookComponent]
})
export class AppModule { }

post.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.css']
})
export class PostComponent {

  posts;
  constructor(private http:HttpClient) { 
    http.get('https://jsonplaceholder.typicode.com/posts')
      .subscribe(response=>{
        //console.log(response);
        this.posts=response;
      })
  }
}

book.component.ts - not sure if the issue is here or not. I have attempted to import post.component.ts here but it is not used and appears to be done at a higher level

import { Component } from '@angular/core';
import { FormControl, FormGroup, NgForm, Validators } from '@angular/forms';
import { ImageValidator } from './image.validator';

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

// Reactive Form
export class BookComponent {
    bookForm=new FormGroup({
        name:new FormControl('', [Validators.required, Validators.minLength(3)]),
        writer:new FormControl('',Validators.required),
        price:new FormControl('',Validators.required),
        image:new FormControl('', [Validators.required, ImageValidator.isValidExtension])
    })

    get name(){
        return this.bookForm.get('name');
    }

    get image(){
        return this.bookForm.get('image');
    }

    onSubmit(){
        console.log(this.bookForm.value);
    }

    updateBook(){
        this.bookForm.patchValue({
            name:'Childhood',
            price:'5'
        })
    }
}

book.component.html

<post>
    <ul>
        <li *ngFor="let post of posts">
            {{post.title}}
        </li>
    </ul>
</post>

Answer 1

The variable posts is being used in book.component.html So It is expected to be declared in book.component.ts. Since it is not present it is throwing an error. You should be able to fix this if you can move that block of code within the BookComponent as follows:

export class BookComponent {

  posts;
  constructor(private http:HttpClient) { 
    http.get('https://jsonplaceholder.typicode.com/posts')
      .subscribe(response=>{
        //console.log(response);
        this.posts=response;
      })
  }
}