Angular 2's counterparts to jQuery's append(), prepend(), and html() functions

Question

Angular 2's counterparts to jQuery's append(), prepend(), and html() functions

I'm currently working on creating an element through code that looks like this:

let template=``;
      for(let i=0;i<wht.length;i++){
        template +=`<li title="${wht[i]}" style="color:#000">
          <span (click)="slctRmv($event)">×</span>${wht[i]}
          </li>`;
      }
      jQuery("#myId").prepend(template);

The content is getting appended to myId successfully, however, the click event is not triggering as expected in the template.

Is there a solution available for this issue in Angular 2?

jquery typescript angular ecmascript-6

Answer 1

Answer №1

Avoid direct DOM manipulation in Angular2 for better performance.

To reference an anchor element, you can do the following:

@Component({
  selector: '...',
  template: `<div><span #myAnchor></span></div>`})
class MyComponent {
  @ViewChildren('myAnchor') myAnchor;

  constructor(private renderer:Renderer) {}

  ngAfterViewInit() {
    // this.myAnchor.nativeElement.appendChild();
    this.renderer.invokeElementMethod(this.myAnchor, 'appendChild', []);
  }
}

Explore other methods provided by HTML elements like [Node.appendChild()](https://developer.mozilla.org/de/docs/Web/API/Node/appendChild)

However, it is recommended to use the methods offered by Renderer.

You can also achieve similar results with:

<div><span [innerHTML]="someField"></div>

using:

class MyComponent {
  someField:string = '<div>xxx</div>';
}

Answer 2

Avoid direct DOM manipulation in Angular2 for better performance.

To reference an anchor element, you can do the following:

@Component({
  selector: '...',
  template: `<div><span #myAnchor></span></div>`})
class MyComponent {
  @ViewChildren('myAnchor') myAnchor;

  constructor(private renderer:Renderer) {}

  ngAfterViewInit() {
    // this.myAnchor.nativeElement.appendChild();
    this.renderer.invokeElementMethod(this.myAnchor, 'appendChild', []);
  }
}

Explore other methods provided by HTML elements like [Node.appendChild()](https://developer.mozilla.org/de/docs/Web/API/Node/appendChild)

However, it is recommended to use the methods offered by Renderer.

You can also achieve similar results with:

<div><span [innerHTML]="someField"></div>

using:

class MyComponent {
  someField:string = '<div>xxx</div>';
}

Answer 3

Answer №2

While it may not be recommended for modifying the view, incorporating libraries like jquery can still have its benefits.

If you prefer a lighter version, you could consider using https://www.npmjs.com/package/jquery-lite.

An example scenario where this approach could be useful is when an external library returns HTML that requires DOM manipulation before being sent to another service. In such cases, relying solely on vanilla JS can be time-consuming.

Answer 4

While it may not be recommended for modifying the view, incorporating libraries like jquery can still have its benefits.

If you prefer a lighter version, you could consider using https://www.npmjs.com/package/jquery-lite.

An example scenario where this approach could be useful is when an external library returns HTML that requires DOM manipulation before being sent to another service. In such cases, relying solely on vanilla JS can be time-consuming.

Angular 2's counterparts to jQuery's append(), prepend(), and html() functions

Answer №1

Answer №2

Similar questions

Populate Angular Material Select choices from a provided URL

Setting a timeout in jQuery that resets every day until midnight

Verify the Ajax submission of a post request prior to transmitting any data

Discovering the process of searching for options in a dropdown menu

Creating a dynamic method to set data for a stacked bar chart in chart.js

What methods can be used to monitor changes made to thumbnails on the YouTube platform?

Ways to exclude an object field in Angular 7

Embedding an image by inserting the URL

Tests in headless mode with Cypress may fail sporadically, but consistently pass when running in a real browser

Using AJAX to query and parse Django QuerySet with JQuery

Eliminate the hovering effect from images that are hyperlinked

Dynamic resizing of grids using React and TypeScript

Retrieve the Youtube video-ID from XML element

Using JQuery .ajax to store information in the database

Tips for showing the data from a JSON object with numerous arrays in Angular HTML

What are the best strategies to prevent text from appearing jumpy while fading in word by word?

What is your approach to converting this jQuery code to ES6 syntax?

"Encountering an error stating 'SyntaxError: Unable to use import statement outside of a module' when attempting to import a module that itself imports another module for side

How can the application configuration be sent from MVC to Angular 2?

Issues with Recursive Ajax Functionality in Internet Explorer 11