Trigger a child component function in Angular by responding to user input

Question

Trigger a child component function in Angular by responding to user input

Within my application, there exists a parent component (pc) along with 4 child components (cc1, cc2, cc3, and cc4). Imagine a situation where a user inputs a number between 1-4 into a text field, and I want to call a specific function in the corresponding child component.

For instance, if I wanted to execute a function from child component 2, I could use @ViewChild:

@ViewChild('cc2') child;

and then invoke the function using:

this.child.somefunc();

However, it is not possible to achieve something like this:

@ViewChild('cc' + ValuefromUser)

during an onClick event, for instance, to obtain a reference to the desired component. Do you have any suggestions on how I can accomplish this?

javascript angular typescript

Answer 1

Answer №1

One way to access them is by using the ViewChild decorator and assigning them to different variables:

@ViewChild('cc1') child1;
@ViewChild('cc2') child2;
...

In this scenario, you can reference template elements either by their template variable name (e.g. cc1) or by their component class (e.g. Child1Component).

Another approach is to fetch them with the ViewChildren decorator into a single variable:

@ViewChildren('cc1, cc2, cc3, cc4') children;

In this case, you can only refer to the template elements by their template variable name. It may be challenging to distinguish between them since the children variable stores instances of component classes. You would need to compare them against a map of classes to filter out those with the desired identifier using QueryList methods such as filter or find:

const childrenMap = { 1: Child1Component1, 2: ... };

...

const filteredChildren = children.filter(child => {
  if (childrenMap[valuefromUser])
    return filteredChild instanceof childrenMap[valuefromUser]);
});

Answer 2

One way to access them is by using the ViewChild decorator and assigning them to different variables:

@ViewChild('cc1') child1;
@ViewChild('cc2') child2;
...

In this scenario, you can reference template elements either by their template variable name (e.g. cc1) or by their component class (e.g. Child1Component).

Another approach is to fetch them with the ViewChildren decorator into a single variable:

@ViewChildren('cc1, cc2, cc3, cc4') children;

In this case, you can only refer to the template elements by their template variable name. It may be challenging to distinguish between them since the children variable stores instances of component classes. You would need to compare them against a map of classes to filter out those with the desired identifier using QueryList methods such as filter or find:

const childrenMap = { 1: Child1Component1, 2: ... };

...

const filteredChildren = children.filter(child => {
  if (childrenMap[valuefromUser])
    return filteredChild instanceof childrenMap[valuefromUser]);
});

Trigger a child component function in Angular by responding to user input

Answer №1

Similar questions

retrieving JSON data within the controller

Accessing FUSEKI using JavaScript

What is the best way to change between different Angular 2 material tabs using typescript?

Preparing data in the Vuex Store efficiently for an AJAX request

Initiate the Brave web browser on a Linux system with the help of selenium and JavaScript

The implementation of user context failed to meet expectations in terms of writing

Getting the component class from a native element reference in Angular: A step-by-step guide

Getting an error with TypeScript and React refs: Cannot access property 'current' when it's undefined

Leveraging the result of one ajax function within a different ajax function

Utilize Typescript to ensure uniformity in object structure across two choices

Integrate a dynamic component into the Angular 7 template

What are some ways to reinvigorate your determination?

A guide on incorporating typings for d3-tip in TypeScript 2.0

The alterations made to a single dropdown option are causing ripple effects across all other dropdowns

Does implementing HTTPS on my web server also secure my AJAX calls?

Toggle the play/pause function by clicking - Trigger Ajax

"Explore a different approach to file uploading with React Native JavaScript by using either blob or base64 encoding

Exploring the Angular way of searching through arrays of objects

Finding the Port Number where the NodeJS server is actively listening

Creating a Custom Emoji Module