Angular, manipulating components through class references instead of creating or destroying them

Question

Angular, manipulating components through class references instead of creating or destroying them

I am exploring ways to move an angular component, and I understand that it can be achieved through construction and destruction. For example, you can refer to this link: https://stackblitz.com/edit/angular-t3rxb3?file=src%2Fapp%2Fapp.component.html

However, I am facing a scenario where the components are already present in the DOM, and I simply want to relocate them within the DOM without creating new ones.

I have references to both source and destination class locations:

const dom: HTMLElement = this.el.nativeElement;
const elements1 = dom.querySelectorAll('.sourceClass');
const elements2 = dom.querySelectorAll('.destinationClass');

I have searched online but couldn't find any examples of moving elements directly without creating new ones. Additionally, I prefer not to use jQuery for this purpose.

If I were using jQuery, I would typically do something like:

jQuery('.destination').appendTo('.source');

This approach usually works well. Thanks!

Sean

angular typescript

Answer 1

Answer №1

If you're uncertain about the requirements, consider utilizing the Renderer2 for your task.

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1> 
  <child1 #child1></child1>
  <div #enmptyBox class="empty-box">
  </div>
  <br>
  <button (click)='moveChild1()'>move comp1 to empty box</button>
  `,
  styles: [`h1 { font-family: Lato; } .empty-box{border: 1px dotted; height: 100px; width: 500px}`]
})
export class HelloComponent {
  @Input() name: string;
  @ViewChild("child1", { read: ElementRef }) child1;
  @ViewChild("enmptyBox", { read: ElementRef }) enmptyBox;

  constructor(private elRef:ElementRef, private renderer: Renderer2) {}

  moveChild1() {
    // first approach 
    this.renderer.appendChild(this.enmptyBox.nativeElement,this.child1.nativeElement);
    // second approach
    this.renderer.appendChild(this.elRef.nativeElement.querySelector('.empty-box'),this.child1.nativeElement);
  }
}

Check out the full demonstration on StackBlitz here

Answer 2

If you're uncertain about the requirements, consider utilizing the Renderer2 for your task.

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1> 
  <child1 #child1></child1>
  <div #enmptyBox class="empty-box">
  </div>
  <br>
  <button (click)='moveChild1()'>move comp1 to empty box</button>
  `,
  styles: [`h1 { font-family: Lato; } .empty-box{border: 1px dotted; height: 100px; width: 500px}`]
})
export class HelloComponent {
  @Input() name: string;
  @ViewChild("child1", { read: ElementRef }) child1;
  @ViewChild("enmptyBox", { read: ElementRef }) enmptyBox;

  constructor(private elRef:ElementRef, private renderer: Renderer2) {}

  moveChild1() {
    // first approach 
    this.renderer.appendChild(this.enmptyBox.nativeElement,this.child1.nativeElement);
    // second approach
    this.renderer.appendChild(this.elRef.nativeElement.querySelector('.empty-box'),this.child1.nativeElement);
  }
}

Check out the full demonstration on StackBlitz here

Answer 3

Answer №2

Thank you for the assistance. After conducting some tests, I found that using a class is not feasible because the proper nativeElement cannot be obtained. ViewChild elementRef poses a problem as my components are generated dynamically. I have decided to approach it differently. Instead of navigating through the DOM, I am maintaining its own elementRef in the component I wish to reference:

    @ViewChild('tableList', {read: ElementRef}) tableListsComp;

    constructor() {
    }

    ngAfterViewInit() {
        if (this.field.inputType === 'tablelist') {
            this.elementRefs = this.tableListsComp;
        }
    }

Later on, I retrieve it using this.elementRefs with the help of a service to which the component is linked.

Once I have the instance, I can perform the following actions:

const compRef1 = this.getFormComponentViaServiceRef('Page');
this.render.appendChild(this.tab1.nativeElement, compRef1.componentRef.instance.elementRefs.nativeElement);

Appreciate the guidance.

Answer 4

Thank you for the assistance. After conducting some tests, I found that using a class is not feasible because the proper nativeElement cannot be obtained. ViewChild elementRef poses a problem as my components are generated dynamically. I have decided to approach it differently. Instead of navigating through the DOM, I am maintaining its own elementRef in the component I wish to reference:

    @ViewChild('tableList', {read: ElementRef}) tableListsComp;

    constructor() {
    }

    ngAfterViewInit() {
        if (this.field.inputType === 'tablelist') {
            this.elementRefs = this.tableListsComp;
        }
    }

Later on, I retrieve it using this.elementRefs with the help of a service to which the component is linked.

Once I have the instance, I can perform the following actions:

const compRef1 = this.getFormComponentViaServiceRef('Page');
this.render.appendChild(this.tab1.nativeElement, compRef1.componentRef.instance.elementRefs.nativeElement);

Appreciate the guidance.

Angular, manipulating components through class references instead of creating or destroying them

Answer №1

Answer №2

Similar questions

Tips for preventing "timeout while waiting for third-party check iframe message" when using Keycloak and Angular

Is it possible to utilize instanceof to verify whether a certain variable is of a class constructor type in TypeScript?

I seem to be stuck in an endless cycle with React hooks and I can't figure out the root cause

Using Bootstrap 4 Datatablejs within an Angular4 CLI project

Transform a string into title case and eliminate any special characters in Angular 6

Encountering an Issue with Angular 9's HttpInterceptor: Unraveling the Mystery of

Steps to resolve the issue of "npm WARN deprecated [email protected] : request has been deprecated, see https://github.com/request/request/issues/3142" error on Windows 10

What is the process for displaying the attributes of a custom object in Typescript?

Error in Angular 12: Unable to access 'bootstrap' property from null

I prefer the value to switch to false whenever I navigate to a new route and then return to the previous route, as the sidebar remains open

How to determine the presence of 'document' in Typecsript and NextJS

Acquire information from an Angular service and output it to the console

Exploring Angular Material's Autocomplete feature and staying updated with incoming data changes

Utilizing React with Typescript: A guide to working with Context

Choosing Vue select options depending on a condition

Encountering issues with Google authentication functionality while using AngularFire2

Basic Karma setup with Typescript - Error: x is undefined

Creating instance methods in a TypeScript object can be accomplished by defining the methods within the object's class definition. When the object is

Styling of Bootstrap HTML element not appearing as expected

Angular Material: Enhanced search input with a universal clear button