Discussion :

[olivier252]

Bon allez, j'en profite tant que tu es par là...Une question à mi chemin entre js et angular...

Je voudrais afficher un élément dynamiquement et j'ai essayé d'utiliser l'exemple de MDN ici :

https://developer.mozilla.org/fr/doc.../createElement
Mais impossible de le faire tourner ds un projet angular (sur codepen ça marche) j'ai l'erreur suivante ds mon code :

Type 'void' is not assignable to type '(this: GlobalEventHandlers, ev: Event) => any'.ts(2322)

le .ts : quasi un copié collé de mdn

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
 
  ngOnInit(): void {
    document.body.onload = this.addElement();
  }
 
  addElement(): void {
    // crée un nouvel élément div
    var newDiv = document.createElement("div");
    // et lui donne un peu de contenu
    var newContent = document.createTextNode('Hi there and greetings!');
    // ajoute le nœud texte au nouveau div créé
    newDiv.appendChild(newContent);
 
    // ajoute le nouvel élément créé et son contenu dans le DOM
    var currentDiv = document.getElementById('div1');
    document.body.insertBefore(newDiv, currentDiv);
  }
 
}

le html est un pur copié collé.
Faut faire un ngAfterViewInit ?
merci de ton aide

[krakatoa]

et bien en fait tu peux faire ça en angular.
sache que toute la puissance d'Angular justement est sur ce point là : la modification du DOM
il ne faut pas utiliser du simple JS dans de l'angular, sacrilège !

et en effet, dans : ngAfterViewInit
parcequ'on travaille sur la vue une fois que celle ci est initialisé.
contrairement à ngOnInit on s'en fou de la vue, on recupere des trucs dans l'api etc....

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
 
 
<ng-container #child1></ng-container>
...
...
@ViewChild('child1', { read: ElementRef, static: false }) childElementRef: ElementRef; 
...
  constructor (private renderer: Renderer2){
  }
...
...
ngAfterViewInit(): void {    
    const p: HTMLParagraphElement = this.renderer.createElement('p');
    p.innerHTML = "add new"
    this.renderer.appendChild(this.childElementRef.nativeElement, p)
}
...

dans cette exemple on fait le job dans un composant
mais il est de bonne pratique de faire ça dans une directive

une directive = un composant sans la vue (car on travaille la vue directement dans le code, on ajoute ou retire des éléments html, on ajoute, retire des classes, des styles en fonctions de différentes données que l'on récupère via les services)


pourquoi faire de la vue en code et pas dans la vue (le HTML) directement ?
parceque parfois il y a de nombreuses conditions, de données diverses et faire ça dans la vue deviendrait une usine à gaz
donc, faire ça en code
if (bidule == 4) alors j'ajoute un element HTML
sinon je le modifie
etc....

c'est plus simple et plus performant que de mettre des *ngIf, *ngFor partout dans la vue.



mais bien sur, tout cela demande d'abord de se former quelques heures !

pour comprendre le pourquoi ? je te conseil de bien suivre ce tuto :

il montre la version JS et la même chose en Angular !


et ensuite, de voir d'autres tutos pour approfondir le sujet !

[olivier252]

T'es top, c'est vrai que les lifecycle hook je suis pas à l'aise...Mais avec une réponse comme ça je devrai y arriver ! Merciiiiiiiiiiiiiiiii !