Как добавить или пробросить событие focus() на кастомный дочерний компонент в Angular?

Question

[Drovosek01]

В проекте на Angular 11 есть кастомный компонент кнопки, например такой:

@Component({
  selector: 'ui-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent extends ButtonBase {}

Этот компонент кнопки используется в других компонентах, например так:

<ng-template [ngIf]="alert">
  <ui-button #myButton>
  </ui-button>
</ng-template>

Проблема в том, что если я в родительском компоненте, беру эту кнопку

@ViewChild('myButton') private myCustomButton: ElementRef<HTMLElement>;

А потом пытаюсь сфокусироваться на ней this.myCustomButton.nativeElement.focus();
То в консоли появляется появляется ошибка

ERROR TypeError: Cannot read property 'focus' of undefined

Как сделать, чтобы этот код работал правильно в контексте описанной проблемы?
this.myCustomButton.nativeElement.focus();

Answer 1

[eRKa]

Создать в дочернем компоненте метод, который будет делать фокус. А из родителя этот метод дергать как this.myCustomButton.focus()

Comments

[Drovosek01]

А как мне из родительского компонента взять дочерний, чтобы я мог методы его класса использовать? :/

[eRKa]

Drovosek01, типизируйте своим классом компонента

@ViewChild('myButton') myCustomButton: ButtonComponent;

[Drovosek01]

eRKa, спасибо, это то, что нужно!