CODEWITHSUNDEEP
typescriptangular
abhilash reddy
abhilash reddy

Reputation: 1596

How to get the ElementRef of an element?

I am loading a component using DCL loadnexttolocation. Is there a way I can load the component in a element specified. I mean I want to change the location where it loads by default. Here is my plunker: http://plnkr.co/edit/2dKxNAOgqYqGn4n0u8PT?p=preview 

add() {
  this._dcl.loadNextToLocation(DynamicCmp, this._elementref);
}

Here is my code when I raise the event.. The elementref considers always root component. Is there a way I can find the elementref of children inside the root?

What I need is the component to be loaded inside this element: 

<div #location id="location"></div>

Upvotes: 1

Views: 2749

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658067

Add a template variable and query that element using @ViewChild()

@Component({selector: 'some-selector',
  template: `
  <div #location id="location"></div>      `
export class MyComponent {
  // only set after `ngAfterViewInit`
  @ViewChild('location') location;
  constructor(private _dcl: DynamicComponentLoader, private _elementref: ElementRef) {}

  add() {
    this._dcl.loadNextToLocation(DynamicCmp, this.location);
  }
}

Plunker

Upvotes: 3

Related Questions