Issue using @Input in Angular 8

Question

I'm working on my first angular project and my home component html looks like below

<div class="container">
  <div>
    <div class="col-md-4">
      <h1 id="tableLabel">Latest</h1>
      <news-item [section]="Latest"></news-item>
    </div>
    <div class="col-md-4">
      <h1 id="tableLabel">STEM Stuff</h1>
      <news-item [section]="STEM"></news-item>
    </div>
  </div>
</div>

and the ts for news-item is as below

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

import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'news-item',
    templateUrl: './news-item.component.html',
})

export class NewsItemComponent {

    public newsitems: NewsItem[];

    @Input() section: string;

    constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {

            http.get<NewsItem[]>(baseUrl + 'newsitems/GetNewsItemsBySection/' + this.section).subscribe(result => {

                this.newsitems = result;

            }, error => console.error(error));
    }
}

I'm getting this.section as undefined within the constructor. What am I missing ?

why have you mapped section as @Input? are you passing some information from <news-item> to the controller? At first instance <news-item> looks like for rendering purpose only. — Shahnaz Khan
– Shahnaz Khan, Commented Nov 13, 2019 at 17:46

Adrita Sharma · Accepted Answer · 2019-11-13 17:41:21Z

1

Try in within ngOnInit() or ngOnChanges()

The difference between constructor and ngOnInit is that ngOnInit lifecycle hook runs after constructor. Input initial values aren't available in constructor, but they are available in ngOnInit

answered Nov 13, 2019 at 17:41

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sachin Gupta · Accepted Answer · 2019-11-13 17:41:14Z

1

The code in constructor executes before the component receives the changes, you need to shift the logic to ngOnInit.

answered Nov 13, 2019 at 17:41

Sachin Gupta

5,3493 gold badges19 silver badges33 bronze badges

Comments

Rashad Mohammed · Accepted Answer · 2019-11-13 18:00:29Z

<news-item [section]="STEM"></news-item>

Angular will interpolate this as value of STEM, and STEM is not defined home component. so the section in news-item component is undefined

<news-item section="STEM"></news-item>

This will interpolate as STEM as a string not an variable.

I hope this will work for you.

  <div>
    <div class="col-md-4">
      <h1 id="tableLabel">Latest</h1>
      <news-item section="Latest"></news-item>
    </div>
    <div class="col-md-4">
      <h1 id="tableLabel">STEM Stuff</h1>
      <news-item section="STEM"></news-item>
    </div>
  </div>
</div>```

Collectives™ on Stack Overflow

Issue using @Input in Angular 8

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related