the use of Renderer2 in angular4 - cannot add it to import array

Question

If I use import { Renderer2 } from '@angular/core'; in my shared.module in angular 4, why can't I also add it in the import array such as:

@NgModule({
    imports: [
        Renderer2,
  ...
 ]

Adding it in the import gives an error. Here is why I need Renderer2:

myComponent.html (part of my shared.module):

<input #searchElem type="text">

myComponent.ts

 constructor(private renderer: Renderer2) {
    }

const element = this.renderer.selectRootElement('#searchElem');
setTimeout(() => element.focus(), 0);

This is done to be able to set the focus of an element.

Renderer2 is supported by angular5. please use Renderer for the angular 4 — Subhojit Mondal
– Subhojit Mondal, Commented Mar 21, 2018 at 11:46

Sam Herrmann · Accepted Answer · 2018-03-21 12:01:42Z

2

Renderer2 is an injectable (service) part of Angular core. It's not a module. The import property in @NgModule is to import other modules. You should be able to use Renderer2 in your component the way you have it, but simply remove it from the module imports.

edited Mar 21, 2018 at 12:01

answered Mar 21, 2018 at 11:56

Sam Herrmann

7,0365 gold badges33 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

annepic Over a year ago

Ok Sam, thank you. Any thoughts on why I get The selector "#searchElem" did not match any elements? I do have #searchElem in the html

Sam Herrmann Over a year ago

Ah, if you need to get a reference to an element in the template of a component, you don't need Renderer2. Use ViewChild instead.

Sam Herrmann Over a year ago

Ex: @ViewChild('searchElem') searchElem: ElementRef

annepic Over a year ago

Yes, actually that's what I am using. I have @ViewChild('searchElem') : ElementRef and then if I dothis.searchElem.nativeElement as HTMLInputElement).focus(); , nativeElement can be problematic and cause errors, hence why I was trying my luck with Renderer

Sam Herrmann Over a year ago

Oh are you attempting to access the searchElement property in the constructor? Since Angular has to query the element first, the earliest you can access it is in the ngOnInit lifecycle hook. Here is a simple example.

Vikas · Accepted Answer · 2018-03-21 12:00:09Z

0

imports

imports describe which dependencies this module has. If your module depends on other modules, you list them here. example

 imports: [
    BrowserModule, HttpClientModule,DataTableModule, AppRoutingModule,
  ],

The short answer is that you put something in your NgModule’s imports if you’re going to be using it in your templates or with dependency injection.

import statement is used to import other typescript files and class

import {className} from 'filePath';

answered Mar 21, 2018 at 12:00

Vikas

12.1k7 gold badges49 silver badges71 bronze badges

Collectives™ on Stack Overflow

the use of Renderer2 in angular4 - cannot add it to import array

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related