Angular2: inline template:8:0 caused by: No provider for String

Question

I wrote the following code in Angular2:

add-item.component.ts

@Component({
  selector: 'add-item',
  template: `<form-item [title]="abcde"></form-item>`,
})

export class AddItemComponent {
  forms: Object[]

  constructor() {
    this.forms = [{title: 'a', link: 'b'}];
  }
}

form-item.component.ts

@Component({
  selector: 'form-item',
  template: `<h3>{{title}}</h3>`,
  inputs: ['title'],
  styles: [`
    h3 { 
        color: blue;      
    }
  `]
})

export class FormItemComponent{

  @Input()
  title: string;

  constructor(title: string) {
    this.title = title;
  }
}

When I run this code I get an error:

Error: Error in ./AddItemComponent class AddItemComponent - inline template:8:0 caused by: No provider for String!

I did a small research and I don't understand what is the problem. I also looked here: Angular2 EXCEPTION No provider for String

Can you please help me?

Answer 1

You need to remove title: string and initialization from a constructor. Angular's constructor expecting providers as arguments.

Answer 2

FormItemComponent class should be:

export class FormItemComponent{
  @Input() title: string = "";
}

'title' must not be initialized inside a constructor.