Access to elementRef in click event in Angular

Question

I defined string list in Component and it's rendering in view like this:

<span  class="one" (click)='do($event, index, item)' 
*ngFor="let item of result;let index = index"  >{{item}} </span>

After each item clicked I want to add div element after that item:

clickedSpan.insertAdjacentHTML('beforeend', '<div >Hi!</div>');

How can I access to elementRef in do function? Or Are there other solutions to manipulate rendered spans which rendered by ngFor?

<span #el (click)="do(el)"> -> angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars — Paul Samsotha
– Paul Samsotha, Commented Apr 15, 2017 at 10:25

Dmitrij Kuba · Accepted Answer · 2017-04-15 10:30:30Z

1

Try this

      do(event, index, item) {
          this.result.splice(index, 0, 'Hi!');
      }

answered Apr 15, 2017 at 10:30

Dmitrij Kuba

1,03810 silver badges14 bronze badges

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

Comments

SeverityOne · Accepted Answer · 2018-03-28 13:14:55Z

0

I template you can create one variable like "#addDivElement" in span tag

You can access these variable in component by using

@ViewChild('addDivElement') and you can do render the HTML element as you want 

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

@Component({
    selector: 'my-app',
    templateUrl: '/app/angular/app.angular.core.html'
})
export class AppComponent {

    @ViewChild('addDivElement')
    public addElement: ElementRef;

    public constructor(private rendere: Renderer) {

    }

    public arrayData = ["Item1", "Item2", "Item3"];

    public doSomething(event, index, item) {
        this.addElement.nativeElement.insertAdjacentHTML('beforeend', '<div class="two">two</div>');

    }
}

edited Mar 28, 2018 at 13:14

SeverityOne

2,74016 silver badges30 bronze badges

answered Apr 15, 2017 at 12:09

Balaji B

3394 silver badges12 bronze badges

1 Comment

Anze Over a year ago

how to do this for multiple spans? for example spans generated by NgFor. thanks

Collectives™ on Stack Overflow

Access to elementRef in click event in Angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related