ViewChild / ViewChildren

Version imprimable

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:

1
2
3
4
5
<main>
  <section #projectsWrapper *ngFor="let project of projects">
    <app-child #project [project]='project'> </app-child>
  </section>
</main>

Code:

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:

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

essaye ça:

Code:

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

21/09/2020, 10h47
bams2009

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

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:

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:

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:

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

Code:

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 ?

21/09/2020, 14h25
bams2009

1 pièce(s) jointe(s)

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..

Pièce jointe 579764
21/09/2020, 15h07
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 ?
21/09/2020, 16h46
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.
21/09/2020, 17h38
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...

petit test:

Code:

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:

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:

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:

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

25/09/2020, 10h15
bams2009
Merci encore dukoid, t'assures avec tous tes conseils

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

Code:

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:

1 2 3 <app-child [project]='project' class="block"> </app-child>
25/09/2020, 10h19
dukoid

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