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

Question

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

dev-dan · Accepted Answer · 2019-06-17 11:22:14Z

2

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 '.

edited Jun 17, 2019 at 11:22

answered Jun 17, 2019 at 10:21

dev-dan

6,3333 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

T Lee Over a year ago

Thanks for the your explanation. it works fine now.

dev-dan Over a year ago

glad I could help, please consider marking as accepted answer if your issue is resolved :-)

Supamiu Over a year ago

a shorter solution, if the value is always the same, is to use fieldType="date" instead.

dev-dan Over a year ago

I think its just syntax, will both end up passing the data into the child, though [fieldType] will take a dynamic value like a component variable.

Supamiu Over a year ago

@TLee It's mainly to distinguish easily what's static from what's dynamic like dince12 explained :)

|

asimhashmi · Accepted Answer · 2019-06-17 10:31:55Z

You may need to initialize the initial values of your @Input and @Output variables inside your component because @Input properties will be undefined unless they are provided from outside and @Output properties need to be initialized with EventEmitter

Also you need to check the values inside ngOnChanges which will be executed during Change Detection

Your code will be like this:

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

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

    constructor() {
       this.fieldType = ''
       this.event = new EventEmitter()
    }
    ngOnInit() {

    }
    ngOnChanges() { // <- it will run every time and give you the latest value of fieldType
      console.log(this.fieldType);
    }
}

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related