Input attribute not receiving data

Question

I am trying to pass data to my component. Here is the component code.

export class requestDetailComponent{
    @Input() id;
    @Input() name;
    @Input() email;
    @Input() purpose;
    @Input() programme;
    @Input() language;
    @Input() comments;

    visible = false;
    toggle() {
    this.visible = !this.visible;
  }

and pattern:

<div class="col-sm-5">    
    <label>{{name}}</label>
</div>

Here is the parent component that passes the data

<ul>
      <li>
          <request-detail [name]='Salman'></request-detail>
      </li>
</ul>

I expect it to Salmanappear in the child component, but this will not happen, what is the problem?

Answer 1

We should know that:

name="Salman"

- it's just sugar for

[name]="'Salman'"

That way you can use both options.

See also Angular 2 Template Syntax from Victor Savkin

If you use the following syntax:

[name]='Salman'

then you must declare a variable Salmanin your component class:

class ParentComponent {
  Salman = 'Salman'
}

Angular2 uses the component instance area to access the variables in question.

Salman , .