Error when trying to display an object in a input value field in Angular

Question

I'm having an object from an API where I want to display the dynamic values in the value field of a form in Angular.

TS2339: Property 'title' does not exist on type 'Object'.

HTML:

      <h1>Edit News Post</h1>
      <form>
        <div class="form-group" >
          <label for="newsTitle">Title</label>
          <input id="newsTitle" type="text" class="form-control" value="{{ news.title }}">
        </div>
</form>

component.ts:

export class NyheterEditComponent implements OnInit {
  news: Object = [];

  constructor(private http: HttpClient, private postsService: PostsService, private route: ActivatedRoute) {
  }

  ngOnInit(): void {
    console.log(this.route.snapshot.paramMap.get('id'));
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.postsService.fetchNewsItem(id).subscribe(response => {
      console.log(response);
      this.news = response;
  })
  }

The object I'm trying to access is displaying in the console as:

{
  id: 4, 
  title: 'Zebrapower', 
  description: 'Sebra som en Sebra', 
  image_path: 'https://images.unsplash.com/photo-1646206924799-c9…lfHx8fGVufDB8fHx8&auto=format&fit=crop&w=884&q=80', 
  active: true
}

I bet it's just a silly mistake, but I can't access it no matter what I try!

EDIT: Added fetchNewsItem from posts.service.ts

  fetchNewsItem(id: number) {
    const options = {headers: new HttpHeaders({
        'Content-Type': 'application/json',
      }),
      params: {
        id: id,
      },
    };
    return this.http.get('https://infoboard-api.setpoint.no/infoboard/news/news-by-id', options)
  }

Answer 1

There are a number things about your code that make things a bit unclear.

Your property news is declared as type Object, but you are assigning an empty array to it as the initial value. The response object you are assigning to it based on the api response is an object though.

As for your error, the JavaScript type Object doesn't have a property title on it which is why you are seeing the error you are. Ideally, you would create an interface or class to represent the return type from the api and declare your property as such, such as:

export public interface NewsItem {
  id: number;
  title: string;
  description: string;
  image_path: string;
  active: boolean;
}

export class NyheterEditComponent implements OnInit {
  news: NewsItem;

  constructor(private http: HttpClient, private postsService: PostsService, private route: ActivatedRoute) {
  }

  ngOnInit(): void {
    console.log(this.route.snapshot.paramMap.get('id'));
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.postsService.fetchNewsItem(id).subscribe(response => {
      console.log(response);
      this.news = response;
  })
  }

While that will take care of your current 'build-time' error. You will most likely now get a run-time error because Angular will render the UI and the property news will have a value of undefined which will cause the rendering to error because you are trying to access the title property on an undefined value. The simplest way to fix that would be to use the null coalescing operator in your html template as follows:

<h1>Edit News Post</h1>
      <form>
        <div class="form-group" >
          <label for="newsTitle">Title</label>
          <input id="newsTitle" type="text" class="form-control" value="{{ news?.title }}">
        </div>
</form>