Applying CSS class conditionally in Angular2

Question

I have below HTML code which recursively create list items based on list returned from Component and I want to apply 'first-child' CSS class to first List item only.

<ul class="link-list-horz">
<li *ngFor="let menu of menulist" [ngClass]="first-child:">
 <a href="">{{menu}}</a>
</li>
</ul>

.first-child a 
{
    border-radius: 10; 
}

export class AppComponent  { 
   name = 'Quiz'; 
   menulist = ['Home','AngularQuiz'] ;  
   useremailid = 'Gaurav-Gupta'; 
}

Please suggest. I am totally new to Angular2.

Yaron Schwimmer · Accepted Answer · 2016-12-01 13:13:21Z

2

ngClass needs a condition to know whether to set that class on the element. You can use the built-in index that comes with ngFor for that.

Try this:

<li *ngFor="let menu of menulist; let i=index" [ngClass]="{'first-child': i === 0}">

answered Dec 1, 2016 at 13:13

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

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

Collectives™ on Stack Overflow

Applying CSS class conditionally in Angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related