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

Leverage the TypeScript compiler's output from a .NET library within a Blazor application by referencing it

How can I display a header from one page on a different page in Ionic?

The attribute 'title' is not found in the data type 'Projects[]'

The NextJS image URL remains constant across various endpoints

Troubleshooting the "TypeError: Swiper.initialize is not a function" Issue in React Swiper using TypeScript

Is there a way to simulate the BeforeInstallPromptEvent for testing in Jasmine/Angular?

Deliver output data from Spring to Angular

Combining two elements in Angular 2

What is the reason behind CORS errors being triggered by the inclusion of an HTTP Interceptor?

Linking to a variable that could potentially be non-existent

Expanding User Type to Include Extra User Data Using NextAuth.js

Protecting Your Angular Application with the Angular App Shell Architecture

Retrieve selected button from loop typescript

Is the latest Swiper JS version compatible with outdated web browsers?

Angular Table Expansion Panel: Expanding Your Data in Style

The custom class-validator decorator in NestJS fails to retrieve the value from the parameter

Utilizing nested endpoints in Angular resource with a Node.js server

How can I ensure that reactive form fields are properly validated in Angular2?

Strategies for effectively searching and filtering nested arrays

The stack property of [object Object] cannot be updated, as it only has a getter method