Angular 4 Library @Input

Hi guys I need a bit of help, as I can't seem to get it to work. I think I might be using the incorrect syntax or something.

I am currently building Angular 4 libraries using YO https://github.com/jvandemo/generator-angular2-library

So everything is working except for the @Input decorators.

Some simple code here

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

@Component({
  selector: 'sample-component',
  template: `<h1>Sample component {{hello}}</h1>`
})
export class SampleComponent {
  @Input('hello') hello: string;
  constructor() {
  }
}

I build the package using npm and then import to dist into another application and then import the module.

I then use this component as follows:

<sample-component hello="koos"></sample-component>

It works very well and the correct message is displayed.

My question is regarding when I bind the hello property like this

<sample-component [hello]="koos"></sample-component>

and I have the variable koos = 'hello I am koos;' in the back-end it does not bind to it at all?

Should I be using other ways to do this? Is there another way to bind @Input and @Output variables?

Your insight would be appreciated.

As requested the parent component:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})

export class AppComponent implements OnInit {
  koos: 'Ek is Koos';
}

I obviously removed the other code, as this is the only required section.

Here is your mistake:

koos: 'Ek is Koos'; // < --- you create type 'Ek is Koos'

The solution is to create like this:

koos:string = 'Ek is Koos';