Why Angular Input is undefined?

Question

I have typical easy situation but in that case @Input() does not working...

Child Component:

@Component({
  selector: 'app-test-grid',
  templateUrl: './test-grid.component.html',
  styleUrls: ['./test-grid.component.scss'],
})
export class TestGridComponent implements OnInit {
  @Input() memos: any[];

  constructor() {
    console.log(this.memos); // prints undefined
  }

  ngOnInit() {
    console.log(this.memos); // also prints undefined
  }
}

<div *ngIf="checker()">
  THIS IS DISPLAYED
  <app-test-grid>
    [memos]="test"
  </app-test-grid>
</div>

// parent component.ts
  test: number[] = [1, 2, 3, 4, 5, 6, 7];

  ngOnInit() {
    console.log(this.test); // print [1,2,3,4,5,6,7]
  }

 checker() {
    console.log('checker', this.test.length !== 0); // this prints true

    return this.test.length !== 0;
  }

what's wrong with this code? this is very rudimentary case... I tried to found some another posts related but I didn't found answer.

Shai · Accepted Answer · 2023-02-06 18:22:15Z

2

You closed the app-test-grid tag so the memos assignment is lost as the content of the component. Use this:

<app-test-grid [memos]="test">
</app-test-grid>

edited Feb 6, 2023 at 18:22

answered Feb 6, 2023 at 18:20

Shai

3,9022 gold badges15 silver badges27 bronze badges

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

3 Comments

Rafalon Over a year ago

Isn't this invalid html?

Shai Over a year ago

Sorry, forgot to close the tag. Now it's fine.

ruddnisrus Over a year ago

Looks that I'm idiot, my oversight, thank You !

Collectives™ on Stack Overflow

Why Angular Input is undefined?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related