Доступ к угловому элементу из родительского элемента

Question

Я реализую таблицу редактируемых данных в угловом формате. Когда я щелкаю ячейку и хочу, чтобы app-editable-text открылся.

Когда я щелкаю ячейку, я хочу установить свойство дочернего элемента. Когда я щелкаю ячейку, запускается метод onCellClick, и я хочу получить доступ к ее соответствующему компоненту app-editable-text и установить для его свойства isOpen значение true.

<td (click)="onCellClick(editableValue)" mat-cell *matCellDef="let element; index as i">
  <div (click)="onCellClick(editableText)" class="editable-value-container">
    <app-editable-text id="0" *ngIf="tableInfo.columnTypes.get(column).name === 'Text'" #editableValue
      [ngClass]="{'edit-active': editableValue.isOpen}" [value]="element[column]">
    </app-editable-text>
  </div>
</td>

Внутри onCellClick editableText есть undefined

Рабочий пример: https://stackblitz.com/edit/angular-l2ybfg Мне нужна реализация onCellClick. Я не могу понять, как изменить свойство isOpen для editable-'text / number /...'.

Answer 1

Сделать isOpen для входа

export class EditableNumberComponent implements OnInit {
  @Input() value;
  @Input() isOpen = false;

  constructor() { }

  ngOnInit() {
  }
}

И изменить значение ввода

<td #me (click)="me.isOpen = !me.isOpen" mat-cell *matCellDef="let element; index as i">
  <app-editable-text *ngIf="types.get(column) === 'Text'" [isOpen]="me.isOpen" [value]="element[column]"></app-editable-text>
  <app-editable-number *ngIf="types.get(column)==='Number'" [isOpen]="me.isOpen" [value]="element[column]"></app-editable-number>
</td>