How to do data property binding in Angular 4?

Question

My project is just a simple mean stack. I am trying to do data property binding to a component that gets data from another component.

task-center.component.ts

import { Component, OnInit } from '@angular/core';
import { Task } from '../task';

@Component({
  selector: 'app-task-center',
  templateUrl: './task-center.component.html',
  styleUrls: ['./task-center.component.scss']
})
export class TaskCenterComponent implements OnInit {

  tasks1: Task[] = [
    {"_id": "1", "subject": "Yeah", "description": "yey", "status": "Good"},
    {"_id": "2", "subject": "Yow", "description": "yipeee", "status": "Passed"}
  ];

  constructor() { }

  ngOnInit() {
  }

}

task-center.component.html

<div class="container-fluid">

  <div class="row">

    <div class="col-sm-9">
      <task-detail></task-detail>
    </div>

    <div class="col-sm-3">
      <task-list [tasks1]="tasks1"></task-list>  
    </div>


  </div>

</div>

task-list.component.ts

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

@Component({
  selector: 'task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.scss'],
  inputs: ['tasks1']
})
export class TaskListComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

task-list-component.html

  <li *ngFor="let task123 of tasks1">
    <a>
      {{task123.title}}
    </a>
  </li>


</ul>

The array of tasks is stored in task-center.component.ts. The array will be passed as an input to task-list.component.ts. task-list.component.ts should display the list.

After saving, i am prompted with:

ERROR in C:/Users/whitecap/Documents/Node Projects SourceTree/dream-angular/src/$$_gendir/app/components/admin/tasks/task-list/task-list.component.ngfactory.ts (36,35): Property 'tasks1' does not exist on type 'TaskListComponent'.

Any help is appreciated.

Answer 1

I am not sure why you have commented @input, that needs to be there on the TaskListComponent ,

export class TaskListComponent implements OnInit {

@Input() tasks1;

EDIT

You are not seeing anything because your task object does not have property named title –

 <li *ngFor="let task123 of tasks1">
    <a>
      {{task123.description}}
    </a>
  </li>

Answer 2

You need to use input inorder to get value to the component

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

@Component({
  selector: 'task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.scss']
})
export class TaskListComponent implements OnInit {
  @Input() tasks1;
  constructor() { }

  ngOnInit() {
  }

}

Answer 3

You have to use @Input in your task-list.component.ts, which bounds an input type property.

 @Input('tasks1') tasks1: Task[];