Angular 2 | I can't Bind property from another class

Question

I can't bind property from other component. is there something wrong with my codes?

and can anyone explain me what's the rule of @Input() decorator?

Here's my Example

documentlist.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { EntryService} from '../../entry.service'

import { Entry } from '../../entry.model';

@Component({
  selector: 'app-documentlist',
  templateUrl: './documentlist.component.html',
  styleUrls: ['./documentlist.component.css']
})
export class DocumentlistComponent implements OnInit {
    @Input() entry: Entry;
    dmsfile: Entry[];

    constructor(private entryService: EntryService) { 

    }

    ngOnInit() {
        this.entryService.getData().then(dmsfile => this.dmsfile = dmsfile);
    }
}

documentlist.component.html

<!-- start documnet list -->
<div class="documentlist">
  <div class="documentlist-container">
    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading clearfix">
        <span class="pull-left">Document list</span>
        <span class="btn btn-primary storage-new pull-right">
        New
        </span>
      </div>               
      <table class="table responsive table-striped">
       <thead>
          <tr>
            <th>Action</th>
            <th>DataID</th>
            <th>Storage ID</th>
            <th>Owner</th>
            <th>DocumentType</th>
            <th>Ref No.</th>
            <th>Status</th>
            <th>Created by</th>
            <th>CreatedDate</th>
            <th>Modified by</th>
            <th>ModifiedDate</th>
          </tr> 
        </thead> 
        <tbody> 
          <tr *ngFor="let documentlist of dmsfile" [entry]="documentlist">
            <td>
              <p>
                <span class="glyphicon glyphicon-trash"></span>
                <span class="glyphicon glyphicon-eye-open"></span> 
              </p> 
            </td> 
            <td *ngFor="let dataids of documentlist.dataid"><p>{{ dataids.id }}</p></td>
            <td *ngFor="let storageids of documentlist.storageid"><p>{{ storageids.id }}</p></td>
            <td *ngFor="let ownerids of documentlist.storageid"><p>{{ ownerids.ownerid }}</p></td>
            <td><p>{{ documentlist.documenttype }}</p></td>
            <td><p>{{ documentlist.documentreferenceno }}</p></td>
            <td><p>{{ documentlist.documentstate }}</p></td>
            <td><p>{{ documentlist.createdby }}</p></td>
            <td><p>{{ documentlist.createddate }}</p></td>
            <td><p>{{ documentlist.modifiedby }}</p></td>
            <td><p>{{ documentlist.modifieddate }}</p></td>
          </tr>
        </tbody> 
      </table>
    </div>
  </div>
</div>
<!-- end document list -->

entry.model.ts

export class Entry {
    dataid: [
        {
            dataid: [
                { 
                    id: number,
                    title: string,
                    comment: string,
                    releasedate: string,
                    releaseversion: string,
                    resourcetcode: string,
                    resourcetname: string,
                    createdby: string,
                    createddate: string
                }
            ],
            storageid: [
                {
                    id: number,
                    ownerid: number,
                    room: string,
                    cabinet: string,
                    bin: string,
                    description: string,
                    storagetype: string,
                    islock: boolean,
                    createdby: string,
                    createddate: string
                }
            ],
            documenttype: string,
            documentreferenceno: string,
            description: string,
            documentstate: string,
            profile: string,
            createdby: string,
            createddate: string,
            modifiedby: string,
            modifieddate: string
        }
    ]       
}

Answer 1

Generally speaking, there are several ways you can pass data from one component to another. The approach you should follow will mostly depend upon the relation between the components.

@Input()

When there is a parent-child relation between the components, for example: let's say there are two components parent-component and child-component

Now in the template code of the parent-component , your code might look like this -

 <!-- more code here --->
    <div>
      <child-component [inputData]="inputData"> </child-component>
    </div>

Notice here that the inputData is passed into the child-component . As you might have guessed - the right side inputData should be set from the parent-component and the [inputData] indicates it is a one way data-binding .

Your component class for parent-component will look like this -

export class ParentComponent {
  //more code here
  public inputData = "Input Value From Parent Component";
}

Since we passed the inputData as @Input() , so we must get hold of it in the child-component :

The component class for child-component might look like this -

import {Input, SimpleChanges, OnChanges} from '@angular/core';
//more import statements here

export class ChildComponent{

  @Input() inputData: any;
  public myInputData: any;

  ngOnChanges(changes : SimpleChanges){
    if('inputData' in changes){
      this.myInputData = changes['inputData'].currentValue;
    }
  }
}

Now you can display the myInputData in your template code and it will always show the updated value passed from the parent-component

Depending on the relation between the components there are other ways to pass data from one component to another like - EventEmitter and shared service .

Hope this helps.