Get root component ElementRef or ComponentRef angular 2

angular get component element
angular component ref
angular elementref
angular destroy component
cannot find name elementref angular 6
angular component get host element
angular root view container
angular get body element

I'm building modal service in angular 2. I resolve most of the issues but i have problem placing the modal component in the body element in a nice angular way. I use DynamicComponentLoader.loadNextToLocation function to get the modal component and place it next to the ElementRef that is uset in DynamicComponentLoader.loadNextToLocation function. But when i don't want to place the created modal inside some component i have to manipulate DOM to insert the created modal. My question is can i use the root element in my application in the modal service? I want to achieve this when specific element isn't provided as container for the modal.

var elementRef = DOM.query('app');
this.componentLoader.loadNextToLocation(ModalBackdrop, elementRef, backdropBindings)
appElementRef: ElementRef;
constructor(private applicationRef:ApplicationRef, injector: Injector) {
  this.appElementRef = injector.get(applicationRef.componentTypes[0]).elementRef;

The AppComponent would need to provide the elementRef field that returns the ElementRef though.

See also

ComponentRef, I'm developing a library and the name of the root component is unknown to me but I still want to access it's ElementRef. Please have a look here: https://github.​com/shlomiassaf/angular2-modal/blob/master/src/angular2-modal/providers/​Modal.ts#L46 Inject ApplicationRef and get the type from there. When working with the Angular component, we often use @ViewChild decorator and template reference to get access to a specific element instance in a component typescript. An example below we have access paragraphs in DOM using @ViewChild decorator and define @ViewChild instance of type elementRef.

To get a reference to the root component, you can inject ApplicationRef:

constructor(private app:ApplicationRef)
      let element: ElementRef = this._app['_rootComponents'][0].location;

Create a way to easily inject or access the root component. · Issue , To get a reference to the root component, you can inject ApplicationRef: constructor(private app:ApplicationRef) { let element: ElementRef = this. Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

The problem is that to get the root ElementRef, your application should be bootstrapped. And in some situations (getting ElementRef in services) we should wait for that. My solution:

import {Injectable, ApplicationRef, ElementRef} from 'angular2/core';

export class SomeService {
  private _appElementRef: ElementRef;

  constructor(appRef: ApplicationRef) {
    appRef.registerBootstrapListener(appComponentRef => {
      this._appElementRef = appComponentRef.location;

Get root component ElementRef or ComponentRef angular 2 , Want to get access to a child component, directive or a DOM element from import { Directive, ElementRef, Renderer2 } from '@angular/core';  Get ViewContainerRef with dependency injection: We are injecting the service in the component. In this case, the container will refer to your host element ( the vcr element ) and the template will be inserted as a sibling of the vcr element.

This works in Angular 5.2.9

Add a public ElementRef in your root component's constructor:

export class AppComponent { 

constructor (public eltRef: ElementRef) { }

And in the component where you want to access the root, do this:

private rootRef: ElementRef;
constructor(private appRef: ApplicationRef) {
    this.rootRef = (this.appRef.components[0].instance as AppComponent).eltRef;

Using ViewChild in Angular to Access a Child Component, Directive , For example, we bind the class AlertComponent to its selector <app-alert> and assign it to the property alert . This allows us to gain access to class methods, like​  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more Angular 2: access an element from the Component, getDocumentById doesn't work

Accessing Other Components, underlying native element (DOM element). import { AfterContentInit, Component, ElementRef } from '@angular/core';. ​. @Component({. selector: '​app-root',. Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular. Help Angular by taking a 1 minute survey !

ElementRef, Update: i want to get root viewContainerRef from any class or any component Is it possible in Angular +2 to do this? export class AppComponent { loadSomething() nativeElement, componentRef.injector.get(​MyDynamicComponent).elRef. But I tried to the Renderer2. constructor( private el: ElementRef, private  Angular 2/4 @ContentChild and @ContentChildren Example. This page will walk through Angular @ContentChild and @ContentChildren decorator example. They are used to fetch first or all elements from content DOM. @ContentChild gives first element matching the selector from the content DOM. @ContentChildren gives all elements of content DOM as QueryList.

how to get root viewContainerRef of angular2 aplication, @Directive v/s @Component in Angular; Angular HTTP GET with TypeScript error http.get( You can get a handle to the DOM element via ElementRef by injecting it into your component's constructor If you don't have that then Angular 2 will be looking for your files at the root level cmpRef: ComponentRef<​Component>; (see angular/components#2286). Because you can bootstrap multiple components, you have to figure out which one you're inside of for any given directive. The only way to do this is to use the Injector instance from that directive and attempt to get the component instance from appRef.componentTypes

48 answers on StackOverflow to the most popular Angular questions, So without further ado, let's get started with our @ViewChild decorator deep dive As we know, in Angular we define a component template by  Dynamically add components using ViewContainerRef.createComponent A wrapper component that adds dynamic components declaratively A custom component that takes the type of a component as input and creates an instance of that component type inside itself.

  • I can't use the ApplicationRef object because loadNextToLocation function only accepts typeof ElementRefobject.
  • let element: ElementRef =['_rootComponents'][0].location;
  • This is the best answer. Though appRef.components[0] is undefined for me in the constructor of a service, so i had to wrap in setTimeout to get it to work
  • @delashum you're right I observed the same thing shortly after posting my original answer. I've just updated it with what I ended up doing, if I remember well.