Directive on Dynamically Rendered Input Element in Angular2+

Question

I'm trying to insert HTML Input Element on button click inside div container. I have created a directive & added the directive on the child input elements. Whenever I click on the input element, that element should be removed from the DOM.

I'm able to achieve this behavior but whenever I click on one HTML Input Element, then all the HTML Elements are removed from the DOM which is not expected.

So, How to get single html input elementref in directive ? app.component.html

<div class="btn-container">
  <button (click)="addInputElement()">Add Input</button>
</div>
<div class="box-container">
    <input deleteDir *ngFor="let el of inputEl; let i = index" id={{i}} [value]=el.value>{{el.value}}/>
</div>

app.component.ts

export class AppComponent implements OnInit{
   inputEl = [];
   addInputElement() {
     this.inputEl.push({value: Math.random()});
   }
}

app.directive.ts

constructor(private elementRef: ElementRef, 
            private renderer: Renderer2) { }


@HostListener('click') onClick() {
    this.renderer.removeChild(this.elementRef.nativeElement.parentNode,this.elementRef.nativeElement)
}

@Obaid I have updated the input html tag. The directive is deleteDir — Shivaay
– Shivaay, Commented Oct 27, 2020 at 8:00

Marek W · Accepted Answer · 2020-10-27 14:24:27Z

1

I recreated your use case and the code you provided looks fine to me. I've created a StackBlitz for it, you can check this out. When I click on one input element, only the one I clicked gets removed.

Update

I have updated my StackBlitz from above. Now the input fields get deleted one by one if you press a key. Basically what I have done is to pass an index to the directive

HTML

<...>
    *ngFor="..."
    delete      <-- directive
    [index]="i" <-- input parameter in directive
</...>

DIRECTIVE

@Input()
index: number;

constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

@HostListener("input")
onInput() {
   this.renderer.removeChild(
    this.elementRef.nativeElement.parentNode,
    this.elementRef.nativeElement.parentNode.querySelector(
      `[id="${this.index}"]`
    )
  );
}

edited Oct 27, 2020 at 14:24

answered Oct 27, 2020 at 10:01

Marek W

7295 silver badges14 bronze badges

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

3 Comments

Shivaay Over a year ago

Thank You ! Yes working for Input element, but for keypress event all the child divs are getting removed from DOM. I mean, If I select the particular div and click on delete button , then all the child divs are removed. Why is this happening ?

Marek W Over a year ago

Ah you are talking about they keypress, let me check that as well. You should update your initial question, as keypress was not part of it.

Marek W Over a year ago

I have adapted by example, it now works with any event being done in the input field

Collectives™ on Stack Overflow

Directive on Dynamically Rendered Input Element in Angular2+

1 Answer 1

Update

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related