Salut tout le monde

Je galère vraiment à comprendre le fonctionnement de ViewChild / ViewChildren
Je cherche à récupérer les ElementRef d'un composant généré en *ngFor via un appel à une BDD firebase

Est-ce que quelqu'un pourrait m'expliquer comment récupérer dans ParentComponent.ts tous les nativeElement des instances <app-child>?



ParentComponent.html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
<main>
  <section #projectsWrapper *ngFor="let project of projects">
    <app-child #project [project]='project'> </app-child>
  </section>
</main>

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
ParentComponent.tsimport { Component, ElementRef, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { Subscription } from 'rxjs';
import { DatabaseService } from './../database.service';
import { Project } from './../models/project.model';
import { gsap, Power4 } from 'gsap';
import { ChildComponent } from '../child/child.component';
 
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent implements OnInit {
 
  childs = [];
 
  @ViewChild(ChildComponent)
  private child: ChildComponent;
 
  @ViewChildren(ChildComponent)
  public childsList: QueryList<ChildComponent>;
 
  sub: Subscription;  
  projects: Project[];
 
 
 
  constructor(
    private databaseService: DatabaseService
  ) { }
 
  ngOnInit(): void {     
 
  }
 
  ngAfterViewInit(){
 
    this.sub = this.databaseService.getChilds().subscribe(
      project => (
          this.onDataLoaded(project)
      )
    )
 
  }
 
  onDataLoaded(project: any) { 
 
 
 
 
 
  }
 
}
DatabaseService.ts
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireStorage} from '@angular/fire/storage';
import { ChildComponent } from './child/child.component';
 
@Injectable({
  providedIn: 'root'
})
export class DatabaseService {
 
  constructor(
    private db: AngularFirestore,
    private fstore:AngularFireStorage
  ) { }
 
 
 
 
  getChilds() {
    return this.db
            .collection<ChildComponent>('projects')
            .valueChanges();
  }
 
}