Angular 2 nth-of-type

Добрый день! Разбираясь в Angular 2 потребовалось вывести список элементов на экран пользователя.

<campaigns>
    <campaign *ngFor="let campaign of campaigns"></campaign>
</campaigns>

И надо чтобы каждый не четный элемент изменял свой цвет с белого на серый.
Раньше при простой верстке я использовал псевдокласс :nth-of-type(odd). Который сам делал каждый нечетный элемент нужно мне цвета(например). Но для компонентов это почему то не работает.
Я могу конечно сделать:

<campaigns>
   <campaign *ngFor="let campaign of campaigns; let i = index" [background]="i % 2 == 0 'green':'white'"></campaign>
</campaigns>

Но мне кажется что этот подход костыльный.
В связи с чем вопрос как передать внутрь компонента информацию из css родительского контейнера.

Код css campaigns

campaign:nth-of-type(odd) {
   background: #f2f2f2;
}

Код сss и html campaign

<div class="campaign">
<div class="inlineBlock videoContainer">
    <video width="100%" controls="controls" preload="metadata">
        <source src="http://a-media.pro/videos/1479360662.mp4">
    </video>
</div>
<div class="inlineBlock leftContainer">
    <a class="campaignName text-top" [routerLink]="['/campaigns', campaign.id]">{{campaign.name}}</a><br/>
    Показов по плану - {{campaign.countShow}}<br/>
    Комплексов - {{campaign.countDevice}}
    <div class="bottom">Тип проката <span class="text-bottom">«{{campaign.methodName}}»</span></div>
</div>
<img src="/images/line.png" class="inlineBlock" style="margin-top: 8px">
<div class="inlineBlock rightContainer">
    <div class="text-top">
        {{campaign.budget}} р.
    </div>
    c {{campaign.start | date: 'dd.M.y' }}<br/>
    до {{campaign.end | date: 'dd.M.y' }}
    <div class="bottom right"><span class="text-bottom">{{campaign.statusName}}</span></div>
</div>

.campaign {
  width: 100%;
  height: 190px;
  padding: 17px 0;
  color: #000000;
  font-size: 16px;
  font-family: "Segoe UI", sans-serif;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}