Can we add "first-child" and "last-child" classes to ngFor?

[dopatraman]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ x ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Right now ngFor renders a list of data as DOM elements.

Expected/desired behavior
I am suggesting that the first element is rendered with a "first-child" class and the last with a "last-child" class.

What is the motivation / use case for changing the behavior?
Would make styling lists easier.

• Angular version: 2.0.0-rc.4
• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
• Language: [all | TypeScript X.X | ES6/7 | ES5]

[sod]

If that helps, you can already do this via:

  <div *ngFor="let item of items; let first = first; let last = last"
    [class.first-item]="first"
    [class.last-item]="last">
      {{ item }}
  </div>`

http://plnkr.co/edit/evR8YKXgvpYWqHgt8zZE?p=preview

[pkozlowski-opensource]

Agree with @sod - the advantage is that it gives you full control over the CSS class name and doesn't require any changes to the framework.

Will close for now.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}