How to get DOM Element in Angular 2

Question

I have a component that has a  lt p gt  element  It s  click  event will change it into a  lt textarea gt   So  the user can edit the data  My question is   How can I make the focus on the textarea  How can I get the element  so I can apply the  focus   on it  Can I avoid using document getElemenntById     I have tried to use the  quot ElementRef quot  and the  quot  ViewChild   quot  however it seems that I m missing something  app component ts  ViewChild  tasknoteId   taskNoteRef ElementRef   noteEditMode  boolean   false   get isShowNote       return   this noteEditMode  amp  amp  this todo note    true   false    taskNote  string  toggleNoteEditMode        this noteEditMode    this noteEditMode     this renderer invokeElementMethod      this taskNoteRef nativeElement  focus          app component html  lt span class  quot the-insert quot  gt     lt form  hidden   quot  noteEditMode  amp  amp  todo note quot  gt       lt textarea  tasknoteId id  quot tasknote quot       name  quot tasknote quot         ngModel    quot todo note quot       placeholder  quot    notePlaceholder    quot       style  quot background-color pink quot        blur   quot updateNote   quot   click   quot toggleNoteEditMode   quot        autofocus   quot noteEditMode quot        innerHTML   quot todo note quot  gt      lt  textarea gt    lt  form gt   lt  span gt

User · Answer

Update  using renderer        Note that the original Renderer service has now been deprecated in   favor of Renderer2   as on Renderer2 official doc   Furthermore  as pointed out by  G  nterZ  chbauer      Actually using ElementRef is just fine  Also using   ElementRef nativeElement with Renderer2 is fine  What is discouraged   is accessing properties of ElementRef nativeElement xxx directly      You can achieve this by using elementRef as well as by ViewChild  however it s not recommendable to use elementRef due to    security issue  tight coupling   as pointed out by official ng2 documentation   1  Using elementRef  Direct Access    export class MyComponent       constructor  private  elementRef   ElementRef     this  elementRef nativeElement querySelector  textarea   focus           2  Using ViewChild  better approach     lt textarea   tasknote name  tasknote    ngModel    taskNote  placeholder     notePlaceholder      style  background-color  pink   blur   updateNote     noteEditMode   false    click   noteEditMode   false  gt     todo note     lt  textarea gt      lt -- changes id to local var   export class MyComponent implements AfterViewInit      ViewChild  tasknote   input  ElementRef      ngAfterViewInit         this input nativeElement focus             3  Using renderer   export class MyComponent implements AfterViewInit          ViewChild  tasknote   input  ElementRef           constructor private renderer  Renderer2                                  ngAfterViewInit              using selectRootElement instead of depreaced invokeElementMethod        this renderer selectRootElement this input  nativeElement    focus

User · Answer

Angular 2 0 0 Final   I have found that using a ViewChild setter is most reliable way to set the initial form control focus    ViewChild  myInput   set myInput  input  ElementRef   undefined        if   input     undefined            setTimeout      gt                this  renderer invokeElementMethod  input nativeElement   focus               0             The setter is first called with an undefined value followed by a call with an initialized ElementRef   Working example and full source here  http   plnkr co edit u0sLLi p preview  Using TypeScript 2 0 3 Final RTM  Angular 2 0 0 Final RTM  and Chrome 53 0 2785 116 m  64-bit    UPDATE for Angular 4   Renderer has been deprecated in favor of Renderer2  but Renderer2 does not have the invokeElementMethod  You will need to access the DOM directly to set the focus as in input nativeElement focus     I m still finding that the ViewChild setter approach works best  When using AfterViewInit I sometimes get read property  nativeElement  of undefined error    ViewChild  myInput   set myInput  input  ElementRef   undefined        if   input     undefined            setTimeout      gt      This setTimeout call may not be necessary anymore               input nativeElement focus               0

User · Answer

Use ViewChild with   localvariable as shown here    lt textarea   someVar  id  tasknote                    name  tasknote                      ngModel    taskNote                    placeholder     notePlaceholder                       style  background-color  pink                     blur   updateNote     noteEditMode   false    click   noteEditMode   false  gt     todo note       lt  textarea gt    In component   OLDEST Way  import  ElementRef  from   angular core    ViewChild  someVar   el ElementRef   ngAfterViewInit        this el nativeElement focus          OLD Way  import  ElementRef  from   angular core    ViewChild  someVar   el ElementRef   constructor private rd  Renderer     ngAfterViewInit         this rd invokeElementMethod this el nativeElement  focus         Updated on 22 03 March  2017  NEW Way  Please note from Angular v4 0 0-rc 3  2017-03-10  few things have been changed   Since Angular team will deprecate invokeElementMethod  above code no longer can be used      BREAKING CHANGES      since 4 0 rc 1       rename RendererV2 to Renderer2   rename RendererTypeV2 to RendererType2   rename RendererFactoryV2 to RendererFactory2   import  ElementRef Renderer2  from   angular core    ViewChild  someVar   el ElementRef   constructor private rd  Renderer2      ngAfterViewInit           console log this rd          this el nativeElement focus            lt  lt  lt      same as oldest way     console log this rd  will give you following methods and you can see now invokeElementMethod is not there  Attaching img as yet it is not documented   NOTE  You can use following methods of Rendere2 with without ViewChild variable to do so many things

[angular] How to get `DOM Element` in Angular 2?

1. Using `elementRef` (Direct Access):

2. Using `ViewChild` (better approach):

3. Using `renderer`:

Examples related to angular

Examples related to dom

[angular] How to get `DOM Element` in Angular 2?

1. Using elementRef (Direct Access):

2. Using ViewChild (better approach):

3. Using renderer:

Examples related to angular

Examples related to dom

1. Using `elementRef` (Direct Access):

2. Using `ViewChild` (better approach):

3. Using `renderer`: