Angular 12.1 add html element using typescript

Question

I'm learning angular via youtube, but I'm trying to do something new, and I'm getting an error on that, my code is attached below, help me out.

I want to setAttribute like this div.setAttribute('(click)',"popUp($event)"); but I got error.

TypeScript

export class AppComponent {
    createEl(){
      console.time("timer");
      for (let i = 0; i < 10; i++) {
        let div = document.createElement("div");
        div.textContent = `Hello, World! ${i}`;
        div.setAttribute('(click)',"popUp($event)");
        document.getElementById('divEl')?.appendChild(div);
      };
      console.timeEnd("timer");
}

HTML

<div id="divEl"></div>
<button (click)="createEl()">click me</button>

Error

my Error photo

Calummm · Accepted Answer · 2021-07-22 13:02:37Z

13

This is not really the angular way of doing things. Try to avoid operations on document such as document.createElement.

A better way to achieve this would be to define what the repeating element would look like in the template and drive it from an array. That way we can keep the template doing display and the typescript doing processing, and Angular handling everything in between.

HTML

<div id="divEl">
  <div *ngFor="let row of rows; index as i;" (click)="popUp($event)">
    Hello, World! {{i}}
  </div>
</div>

<button (click)="createEl()">click me</button>

Typescript

export class AppComponent {
  rows: unknown[] = [];
  createEl():void {
    this.rows.push('something');
  }

  popUp(event:Event):void {}
}

More reading on loops: https://angular.io/api/common/NgForOf

answered Jul 22, 2021 at 13:02

Calummm

8291 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Calummm Over a year ago

What takes more time, execution time or code writing? Either way, this is the appropriate way to structure template updates in angular

Calummm Over a year ago

It is still the appropriate way to do it in Angular. Yes the execution time may be slower in this example, but when you start utilising other Angular template features the overhead is not additive.

Ben L Over a year ago

To improve upon this answer (that is the correct way to utilize the framework), you can use a trackBy function to improve ngFor Rendering performance. Like this *ngFor="let row of rows; index as i; trackBy: myTrackBy”. Then in the TS do: myTrackBy(item, index:number) { return item.idProp}

acat Over a year ago

To add to this, it's not just about time, it's about security. A large chunk of the benefit to using Angular is that it shoulders the burden of manipulating the DOM for you. Otherwise, every time you do direct DOM manipulation in Angular, you need to trace back whatever variables contribute to your DOM manipulations, to make sure they never come from any sort of user input (and no future changes will ever make this the case -- a tall order). Why? Security, in a way somewhat similar to SQL injection (conceptually). Primarily b/c of server-side rendering.

evilstiefel Over a year ago

Be careful about the signature of TrackByFunction<T> - the order is actually the other way around, e.g. *ngFor="let row of rows; trackBy: myTrackBy", and in the template, it is myTrackBy(index: number, item: T) with whatever type T the element has.

|

Brijesh Kalkani · Accepted Answer · 2021-07-23 03:29:39Z

4

That's right check below.

div.addEventListener('click', (e) => {
  this.popUp(e);
});

answered Jul 23, 2021 at 3:29

Brijesh Kalkani

8512 gold badges11 silver badges29 bronze badges

Comments

Robin Dijkhof · Accepted Answer · 2021-09-03 22:02:19Z

2

+25

Problem is you are trying to do angular stuff with pure javascript.

<div (click)="method()"> is angular. In javascript you'd do someting like this <button onclick="myFunction()">Click me</button> Other options are to use event handlers https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Anyhow, angular doesn't recommend changes the DOM because then it won't recognize those changes. Here are multiple examples ho to properly change the dom

answered Sep 3, 2021 at 22:02

Robin Dijkhof

19.3k14 gold badges72 silver badges127 bronze badges

Comments

laiju · Accepted Answer · 2021-07-22 12:41:26Z

1

You can set the click event as shown below instead of using setAttribute

div.addEventListener('click', (e) => {
  this.popUp(e);
});

answered Jul 22, 2021 at 12:41

laiju

1,38310 silver badges17 bronze badges

Comments

codeandcloud · Accepted Answer · 2021-07-22 12:51:12Z

1

(click) is not an html attribute, it is Angular event binding syntax

This syntax consists of a target event name within parentheses to the left of an equal sign, and a quoted template statement to the right.

You cannot use that with JavaScript. Use

div.onclick = popUp;

answered Jul 22, 2021 at 12:51

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

Comments

Craig · Accepted Answer · 2021-09-07 09:18:05Z

0

export class AppComponent {
    createEl(){
      console.time("timer");
      for (let i = 0; i < 10; i++) {
        let div = document.createElement("div");
        div.textContent = `Hello, World! ${i}`;

        div.addEventListener('click', (e) => {
          this.popUp(e);
        });

        document.getElementById('divEl')?.appendChild(div);
      };
      console.timeEnd("timer");
}

answered Sep 7, 2021 at 9:18

Craig

193 bronze badges

1 Comment

Community Over a year ago

Please add further details to expand on your answer, such as working code or documentation citations.

Collectives™ on Stack Overflow

Angular 12.1 add html element using typescript

6 Answers 6

HTML

Typescript

6 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

HTML

Typescript

6 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related