Retrieve the child component's HTML element within the parent component

attendees.component.html (Parent)

 <app-add-guest (guestUserChange)="addGuest($event)"></app-add-guest>

add-guest.component.html (Child)

<form [formGroup]="form">
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label position="stacked" color="light">Guest name</ion-label
        >

        <ion-input // this input here
          formControlName="guestName"
          color="light"
          type="text"
          placeholder="Guest name"
       >
        </ion-input>
      </ion-item>
    </ion-col>
  </ion-row>
</form>

I would like to know how I can access the ion-input element from the parent component. This is necessary because I need to set focus on that input element within the parent component.

While there are many examples of accessing child component methods using @ViewChild, I have not found a solution specific to my scenario described above.

angulartypescriptionic-framework

Answer №1

Proper separation of concerns dictates that the parent should be unaware of the child's template structure. To adhere to this principle, create a method in the child component that will trigger input focus, and have the parent invoke this method when necessary.

@Component({
    /* ... */
    selector: 'app-add-guest',
    template: `
        <!-- ... -->
        <ion-input // specify input element
          formControlName="guestName"
          color="light"
          type="text"
          placeholder="Guest name"
        >
        <!-- ... -->
    `,
})
export class AddGuestComponent {
  @ViewChild(IonInput) guestNameInput?: IonInput;

  focusInput(): void {
    this.guestNameInput?.setFocus();
  }
}

@Component({
    /* ... */
    template: `<app-add-guest></app-add-guest>`,
})
export class AttendeesComponent implements AfterViewInit {
  @ViewChild(AddGuestComponent) child?: AddGuestComponent;

  ngAfterViewInit(): void {
    this.child?.focusInput();
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to make an attribute in an interface mandatory only when another attribute is set to true

How can a relative be made required only when another attribute is true? For Example: interface ITesteProps { required: boolean content{!required && '?'}: string } I understand that this code is not valid. Is it possible to make the ...

reactjstypescripttypes

Slowing down mouse movement with D3 "mousemove" event

I have an Angular application that utilizes D3 with SVG elements. There is a "mousemove" event implemented within the app, which was working fine initially despite the complexity of the application. However, after some recent changes (that were not relat ...

angulard3.js

Generate types based on properties of a nested interface dynamically

Consider the setup provided: enum FormGroups { customer = 'customer', address = 'address', } interface Customer { 'firstName': string; } interface Address { 'street': string; } interface SomeFormEvent { ...

typescript

Modify the width of the <nz-date-picker> component from Ng-Zorro

Currently using Ng-Zorro for my template styling and working on implementing a date picker that I want to align perfectly with the dropdown menu above it. I would like to adjust the width of the date-picker manually within the template, but after visiting ...

htmlcssangularng-zorro-antd

Analyze two sets of JSON data and compile a new JSON containing only the shared values

I am trying to generate two JSON arrays based on a shared property value from comparing two sets of JSON data. this.linkedParticipants =[ { "id": 3, "name": "Participant 2", "email": "<a href="/ ...

javascriptjquerytypescript

Dealing with the possibility of an empty array when accessing elements by index in Typescript

What is the best way to handle accessing elements by index in an array in Typescript when the array can be empty, resulting in potentially undefined elements? I am developing a simple game using React and Typescript where I have a variable named game whic ...

typescripttypes

Posting forms in NextJS can be optimized by utilizing onChange and keypress events for input fields

I am currently working on my first Edit/Update form within a newly created NextJs application as I am in the process of learning the framework. I seem to be facing an issue where the form constantly posts back to the server and causes the page to refresh ...

reactjstypescriptformsnext.js

Adjusting the transparency of TabBadge in Ionic 2

I am currently working on a project that involves tabs, and I'm looking to update the style of the badge when the value is 0. Unfortunately, I am unsure how to dynamically change the style of my tabs or adjust the opacity of the badge in the style. M ...

cssangulartypescriptsassionic2

Guide to Angular 6 Reactive Forms: Automatically filling one text field when another input is selected

I'm currently learning Angular 6 and exploring reactive forms. I want to set up a feature where selecting an option in one field will automatically populate another field. The objective is to have the coefficient input update based on the number sele ...

angulartypescript

Changing the status bar color in Ionic ReactApp for iOS

We are facing an issue with the status bar color in our Ionic React app, after building an iOS app using Capacitor. The problem arises with the white status bar appearing on a white background. After some research, I came across a potential solution menti ...

iosswiftionic-frameworkcapacitor

Using TypeScript, the fetch function cannot be assigned

Why am I encountering this TS warning? Type 'unknown' is not assignable to type 'PokemonList'.ts(2322) This issue is on line: "return e" Here is the code snippet: export interface PokemonList { count: number; next: stri ...

javascripttypescriptreact-native

Encountering an issue post-upgrade with Angular 7 project

Currently, I am facing an issue with upgrading a project from Angular 6 to version 7. Despite following multiple online tutorials and successfully completing the upgrade process, I encountered an error when running the 'ng serve' command: ERROR ...

angulartypescript

Using Angular 2: Pass the field of each item in *ngFor as a parameter when calling a function

I have a functional management application that displays a list of services along with some information (developed last year). Now, I want to add the functionality to show "last request" information on click. However, I encountered an issue with the code i ...

angular

Using parameters and data type in Typescript

When I remove <IFirst extends {}, ISecond extends {}> from the declaration of this function, the compiler generates an error. Isn't the return value supposed to be the type after the double dot? What does <IFirst extends {}, ISecond extends { ...

typescriptfunction

Refreshing the page in Angular 2 without changing the route page

I am currently working on a Component that displays a list of projects, along with Edit and Delete buttons. When the delete button is clicked: onDelete(projectName: string): void { this.projectService.deleteProject(projectName); this.router.navi ...

angulartypescript

"Overcoming obstacles in managing the global state of a TypeScript preact app with React/Next signals

Hello, I recently attempted to implement a global app state in Preact following the instructions provided in this documentation. However, I kept encountering errors as this is my first time using useContext and I suspect that my configuration might be inco ...

reactjstypescriptnext.jspreactpreact-signal

Tips for updating the class of the body in an Angular 2 and Typescript project

When it comes to managing different classes for the login page versus other pages in an application, there is a need to change the body element's class once the user has logged in. Here is how I am attempting to achieve this: index.html <body [ng ...

angulartypescript

Perpetually launching "npm start" on the server

I have been attempting to deploy an angular2 test application on a server. It is functioning well on my local machine using the command NPM start as indicated in my package.json file: "start": "concurrent \"npm run tsc:w\" \"npm run lite&bs ...

angularnpmforever

React Typescript Mui causing `onBlur` event to trigger with every change occurring

I'm currently developing a front-end application using Typescript and React with MUI. The form code I have written is as follows: <TextField label="Password" value={this.state.password} placeholder="Choose a password" type="password" onC ...

reactjstypescriptbluronblurmui

Learn the process of synchronously loading forms and data in Angular

Looking to synchronize the loading of data and form... Let's start by reviewing the code: ngOnInit() { if (this.data.fromCalendar) { this.singleTraining(); } }, 200); this.formControl(); } formControl() { this.gib ...

javascriptangular