ViewChild for dynamically created components

Ionic Framework ionic-v3
1

Hi All,

Is there any way to use @ViewChild when the component you’re trying to access is dynamically created? To make the problem harder, I will not know in advance how many of these components I’ll be creating. Could be 5, could be 25.

@ViewChild('componentName') _foo:any;

given the HTML:

<div *ngFor="let robot of _robotOverlords">
    <my-custom-component #componentName> ... </my-custom-component>
</div>

Any tips or best-practices for that and for how to uniquely name the components is greatly appreciated!!

Thanks,
Ryan

2

What are you really trying to achieve? Can it be done without @ViewChild?

3

Hey @rapropos,

There are 2 projects I am trying to add this to.

In the first project, I want to extend Josh Morony’s flash card components. The front of the card simply shows an image. Flipping the card over would show the details stats of that object. So I’d like to know which card was flipped. I can create the same effect all in one *.html file, but I’d like to branch out and make reusable components.

In the second project, I’m trying to follow Vishin’s solution to my thread here. The code’s not coming together exactly.

Thanks,
Ryan

4

Hey @ryanlogsdon, I’m looking for something similar. Did you ever figure out a solution?

5

Isn’t this described directly right in the Angular documentation?

https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html

6

Hi @gigocabrera, the necessary code grew incredibly ugly, so the clean, simple solution I came up with was to add a unique id to each dynamic element, and then I accessed the elements with

let element = document.getElementById(someID);

1 line of code and a little forethought about the id values instead of unintelligible ViewChildren code. :smile:

2 Likes
7

@ryanlogsdon your solution did the trick for me too. Thank you very much!!!

8

hi , i am trying to do something similar but not sure how… I have news feed (posts) component which consists of Cards… each card has avatar + image + text(card-content) + likes + comments.

someone suggested that the post itself should be a child component … so in parent component (news feed) should only list these cards.

the reason I can’t put all of them in one component is because the likes and comments part get complicated

can someone point me to the right direction on how to achieve this and whether its possible to do nested components in ionic 2? Also, can the child component (posts) have their own .html ? and one last thing , how my file structure will be like for parent and child component?
a simple example would help, thanx

9

Child components are of no use if they complicate your code. Their sole purpose is to abstract parts of code you are going to reuse.

In your case there are 2 strong reasons to not build a child component:

1 - you have a very specific use case that will presumably be used only on this screen

and

2 - it sounds like it’s getting complicated already

Just write it without the abstraction and forget that someone told you to go the more object-oriented route. Abstraction isn’t best in every case.

Good luck,
Ryan

1 Like
10

use ViewChildren: https://stackoverflow.com/a/48562357/1077309