CODEWITHSUNDEEP
angularangular2-directives
Bean0341
Bean0341

Reputation: 1697

Angular 2 Get multiple elements with elementref

I have a custom directive, and I am trying to use it on two elements so I can enable contenteditable = 'true'I have tried calling the directive twice like so...

    <div>
      <p myEdit>click me to edit</p>
      <p myEdit>click me to edit with same directive</p>
      <button (click)="Edit()">Press me to enable editing</button>
    </div>

It works for the first <p> element put not the second. Here is a plunker with my set up https://plnkr.co/edit/eLIOAzt4BHA84DEAPTRX?p=preview

Any help would be great, thank you!

Upvotes: 0

Views: 1614

Answers (2)

Muhammed Misir
Muhammed Misir

Reputation: 481

Use instead your own directive [contentEditable] .. is a better solution :) 

import {Component, NgModule, ViewChild} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {EditDirective} from './editDirective'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <p [contentEditable]="isEditable">click me to edit</p>
      <p [contentEditable]="isEditable">click me to edit with same directive</p>
      <button (click)="Edit()">Press me to enable editing</button>
    </div>
  `,
})
export class App {

isEditable: boolean = false;

Edit() {
   this.isEditable = true;
}

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, EditDirective ],
  bootstrap: [ App ]

})
export class AppModule {}

Upvotes: 2

Sasxa
Sasxa

Reputation: 41274

Use @ViewChildren:

export class App {
  @ViewChildren(EditDirective) vc:EditDirective;
  constructor() {}
  Edit(){
    this.vc.map(c => c.Edit())
  }
}

https://plnkr.co/edit/KuICFo5888bCxmZG5D1O?p=preview

Upvotes: 1

Related Questions