I have a parent component which prints child component out via *ngFor
.
<app-item
*ngFor="let item of items; let i = index"
[item]="item" [index]="i" (edited)="updateItems($event)">
</app-item>
Child component has following template
<input [(ngModel)]="item" #input type="text" class="form-control" (blur)="editEnd()">
And the following class
export class ItemComponent implements OnInit {
@Output()
edited = new EventEmitter<{index: number, value: string}>();
@ViewChild('input', {read: ElementRef}) input: ElementRef;
isEditing = false;
@Input() item: string;
@Input() index: number;
constructor() { }
ngOnInit() {
}
editStart(): void {
this.isEditing = true;
console.log(this.input);
}
editEnd(): void {
this.isEditing = false;
this.edited.emit(
{
index: this.index,
value: this.item
}
);
console.log('ended');
}
delete(): void {
console.log('deleted');
}
}
The problem is that console.log(this.input.nativeElement);
returns undefined meanwhile console.log(this.input);
contains property "nativeElement". I tried to change ViewChild to ViewChildren but nevertheless console.log(this.input.nativeElement.first());
returns undefined either.