Discussion :

[bams2009]

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();
  }
 
}

[krakatoa]

essaye ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 @ViewChildren("project")
  public childsList: QueryList<ChildComponent>;
 
  ngAfterViewInit(): void {
    console.log(this.childsList);
  }

[bams2009]

Merci beaucoup @krakatoa
C'était juste ça !!!

[bams2009]

Bon en fait, ça marche si j'ajoute les app-child à la main mais pas avec l'appel firebase


J'ai fait ça

ParentComponent.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
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
55
56
57
import { 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 project: ChildComponent;
 
  @ViewChildren(ChildComponent)
  public childsList: QueryList<ChildComponent>;
 
  sub: Subscription;
  projects: Project[];
 
 
 
 
  constructor(
    private databaseService: DatabaseService
  ) { }
 
  ngOnInit(): void {
 
  }
 
  ngAfterViewInit(){
 
    this.sub = this.databaseService.getChilds().subscribe(
      projects => (
          this.onDataLoaded(projects)
      )
    )
 
  }
 
  onDataLoaded(projects: any) {
    this.projects = projects;
 
    console.log('projects', projects);
    console.log("childslist", this.childsList);
 
 
 
  }
 
}

ParentComponent.html

Si j'ajoute à la main j'ai bien ma QueryList.length = 3

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<app-child> </app-child>
<app-child> </app-child>
<app-child> </app-child>

Mais si je fais l'appel à la base, ma QueryList est vide..

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<app-child #childsList *ngFor="let project of projects" [project]='project'> </app-child>

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 @ViewChildren("childsList ")
  public childsList: QueryList<ChildComponent>;
 
  ngAfterViewInit(): void {
    console.log(this.childsList);
  }

tu essayes de faire quoi, dans quel but ?

[bams2009]

Merci de t'intéresser à mon problème

J'essaie d'implémenter une animation GSAP et tout fonctionne bien à part quand je cherche à utiliser des composants générés depuis cette QueryList.
Je sais pas si je suis clair.. J'ai fait un repo si ça peut t'aider à comprendre : https://github.com/plvbroker/public-lab.git (branche 'firebase')

J'ai pu progresser grâce à tes conseils mais ça sort du thème principale de mon post parce que j'arrive maintenant à récupérer tous les ElementRef dans un tableau mais là encore l'animation ne fonctionne pas correctement
Pourtant si tu regardes dans mon screenshot, dans la console le css est bien modifié par GSAP..

[dukoid]

tu veux dire que le css est modifié mais il n'est pas répercuté à l'écran ?


chez moi, via firerfox et edge, je vois bien "project#01" disparaitre
par contre sur chrome ça ne fonctionne pas

c'est ça ton problème ?

[bams2009]

Merci dukoid

J'ai même pas essayé sur un autre navigateur 🤦*♂️

Mais oui c'est bien ça, le css n'est pas répercuté alors que dans la console on voit la valeur changer..
Je teste sur firefox et continue à chercher.

[bams2009]

Ca marche sur firefox t'as raison, merci pour le tuyau
En revanche, pas sur Edge

Bon ça m'avance pas du tout du coup!
C'est la première fois que je suis confronté à un comportement différent entre firefox et chrome...

[dukoid]

petit test:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
import { gsap, Back, Bounce, Elastic } from 'gsap';
...
...
  ngOnInit(): void {
    gsap.to(".main .box", 3, { x: 200, stagger: 0.3, ease: Bounce.easeOut })
  }
 
  onClick(){
    gsap.to(".box1", 3, { x: 200,background:"red", ease: Elastic.easeOut,  })
  }

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
.box,
.box1 {
    width: 100px;
    height: 100px;
    background: black;
    margin: 1rem
}
 
.main {
    margin: 5rem;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div #animate class="main">
  <div id="go" (click)="onClick()" class="box1"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

quand tu cliques sur le 1er carré noir, il se déplace.
et ça fonctionne sur tous les navigateurs !


pour ton pb, je dirais qu'au lieu de passer par des viewChildren, passe par la façon classique de gsap cad par des classes css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

gsap.to(".main .box".........

[bams2009]

Merci encore dukoid, t'assures avec tous tes conseils

J'ai essayé d'utiliser les classes dans gsap

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

gsap.to(".main .box".........

Mais si j'ai bien compris, le problème avec le *ngfor c'est qu'à l'initialisation du composant les éléments n'existent pas encore et gsap n'arrive pas à les utiliser

En revanche, y'a peut-être un lien avec la lib tailwindcss, un gars m'a trouvé une soluce ici : https://github.com/tailwindlabs/tail...scussions/2430
En ajoutant simplement un "style:'display:block'"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<app-child
  [project]='project'
  class="block"> </app-child>

[dukoid]

bien jouez, tu as la bonne tactique de recherche pour trouver la solution.
ça fonctionne donc