@Input and @Output are always undefined in Angular-Cli

Whatever values are inside the individuals are printed without issues but whatever is obtained using @Input or @Output is not displayed.

child.component.ts

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

export class FormInputComponent implements OnInit {
    @Input() fieldType: string;
    //with another Input and 1 Output DOM

 constructor(
    ) {
    }

    ngOnInit() {
        console.log(this.fieldType);
    }
}

parent.component.html

<app-form-input (value)="action($event)"
    [fieldType]="date"
    [maxAllowItem]="1">
</app-form-input>

Is there anything goes wrong in syntax? The Log always show ‘undefined’ in all cases.

Thanks

Answer

I think this is trying to pull in a variable defined within your component.

Try the following syntax, wrap the string again, this should ensure you are passing a string and not a variable from the component, the input will then know to expect a string.

[fieldType]="'date'"

This is wrapping the string in " and '.