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.