How can I get the last child of input type text inside an nGfor ? For first child:
span:first-child > input[type=text] 
-
it works for last child too stackblitz.com/edit/ngstyle-examples-acbg6k. can you provide problem in this stackblitz?Lia– Lia2019-03-10 10:38:32 +00:00Commented Mar 10, 2019 at 10:38
-
@FatemeFazli add another input type like a button and it won't workMikael Ken– Mikael Ken2019-03-10 12:41:28 +00:00Commented Mar 10, 2019 at 12:41
-
now check the stackblitz again.Lia– Lia2019-03-10 12:49:22 +00:00Commented Mar 10, 2019 at 12:49
-
yes, I agree but my angular html structure will be this one: pastebin.com/fycs1pgjMikael Ken– Mikael Ken2019-03-10 12:59:49 +00:00Commented Mar 10, 2019 at 12:59
Add a comment
|
2 Answers
You can use ViewChildren (in stackblitz if you open the page in new window, at first the last element get the focus, each time you push "add button" the last element get the focus too.
The idea is has a series of inputs with reference name, e.g. input
<p *ngFor="let i of elements"><input #input ></p>
You define
@ViewChildren('input') inputs:QueryList<ElementRef>
In ngAfterViewInit
ngAfterViewInit() {
this.inputs.last.nativeElement.focus()
this.inputs.changes.subscribe(() => {
this.inputs.last.nativeElement.focus()
})
}
We must subscribe to this.inputs.changes if our code allow change the number of inputs.
NOTE:In the stackblitz I use a tipical pipe(takeWhile(()=>this.alive) to unsubscribe on Destroy the component
Comments
I think you just want to change the class of the last item, so I used Eliseo code but instead of listening to changes I just check if that element is last item in elements in creation time. maybe you do not need that listening complexity.
https://stackblitz.com/edit/angular-l5ccns
<button (click)="elements.push(1)">add</button>
<p *ngFor="let i of elements; let ind = index"><input #input [ngClass]="{'lastItem': ind === elements.length-1}" ></p>
