A volte mi sono trovata nelle seguente situazione: dovevo modificare il DOM ma ciò non era possibile in quanto non potevo mettere mano al codice HTML, che era generato in maniera automatica. Mentre con jQuery tutto ciò sarebbe stato un gioco da ragazzi, Angular non consente di modificare il DOM in una maniera altrettanto semplice e immediata.


La situazione era anche aggravata dal fatto che l’elemento che volevo intercettare non aveva un selettore specifico, quindi non potevo utilizzare @viewChild.
In pratica dovevo applicare il focus al primo input o editor di un form e, come anticipato, non era possibile modificare il codice HTML.

La soluzione che ho trovato è la seguente:

  1. usare document.querySelectorAll(“…”) all’interno di ngAfterViewInit()
  2. richiamare ngAfterViewInit() all’interno del metodo che renderizza il DOM in questione

Di seguito il codice.

Copy to Clipboard