CODEWITHSUNDEEP
angular
Sachith Rukshan
Sachith Rukshan

Reputation: 351

How to add a component into a elementref?

I want to add a component into a elementref as a child and have access to it's properties.

const element: HTMLElement = document.createElement('div');

element.innerHTML = // Component needs to be added here

// Need to have access to properties of the Component here

I have added a Full Calendar to my project and for the timeline i need to add custom resource Elements. For this i only get access to the HTMLElement and some data. So What i want to do is pass an intialised component to the HTMLElement.

Right now my only option is writing the html as the string and passing it to the innerHTML. Is there a better Option?

Upvotes: 12

Views: 11266

Answers (5)

prabhatojha
prabhatojha

Reputation: 2085

In one of my projects, I achieved something similar to your requirement this way. Let me know if it helps?

constructor(private componentFactoryResolver: ComponentFactoryResolver,
            private injector: Injector, 
            private appRef: ApplicationRef) {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent); // Your dynamic component will replace DynamicComponent

  const componentRef = componentFactory.create(this.injector);

  this.appRef.attachView(componentRef.hostView);  

  const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;

  const element: HTMLElement = document.createElement('div');
  element.appendChild(domElem); // Component needs to be added here
  document.body.appendChild(element);
}

This way you will have reference to your dynamic component as componentRef

Upvotes: 17

GideonMax
GideonMax

Reputation: 594

given that the component is registered in window.customElements,
and according to the Angular documentation it probably is,
you could do:

var element = document.createElement("div");

var comp= document.createElement("your-component")
/*
optionally set component attributes or anything else
you also have access to the component's properties here
comp.setAttribute("name",value)
console.log(comp.exampleProperty)
*/
element.appendChild(comp)

Upvotes: 0

Burak G&#246;k
Burak G&#246;k

Reputation: 340

The Angular documentation says

Angular elements are Angular components packaged as custom elements (also called Web Components)

Thus, you can create the element you want to add using

  1. document.createElement('elementName') if it is an autonomous custom element, or
  2. document.createElement('baseElementName', {is: 'elementName'}) if it is a customized built-in element.

You can insert the element you created into a container element using container.insertAdjacentElement(position, element) as explained here.

Upvotes: 1

Amrish khan Sheik
Amrish khan Sheik

Reputation: 101

import { AfterContentInit, Component, ElementRef } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
    <h1>My App</h1>
    <pre>
      <code>{{ node }}</code>
    </pre>
  `
})
export class AppComponent implements AfterContentInit {
  node: string;

  constructor(private elementRef: ElementRef) { }

  ngAfterContentInit() {
    const tmp = document.createElement('div');
    const el = this.elementRef.nativeElement.cloneNode(true);

    tmp.appendChild(el);
    this.node = tmp.innerHTML;
  }

}

Upvotes: 0

Robin Dijkhof
Robin Dijkhof

Reputation: 19288

You might be able to use Renderer2

export class AppComponent { 
@ViewChild('addButton') 
  private animateThis: ElementRef;  
  constructor(private renderer: Renderer2) {}

  addBtn() {
    const button = this.renderer.createElement('button'); 
    const buttonText = this.renderer.createText('This is a button');
    this.renderer.appendChild(button, buttonText);
    this.renderer.appendChild(this.animateThis.nativeElement, button);
  }
}

More examples

Upvotes: 7

Related Questions