whitepro213

В компонент добавить exportAs:

@Component({
  selector: 'app-step-controls',
  template:
  `
  <div>
    <ng-content></ng-content>
  </div>
  `,
  exportAs: 'appStepControls'
})
export class AppStepControlsComponent {
}

Использовать как-то так:

<app-step-controls #ascs="appStepControls">
  <button>Назад</button>
  <button (click)="ascs.toNextStep('test')">Вперед</button>
</app-step-controls>

но, насколько я понимаю, это единственное преимущество

Второе преимущество - меньше размер html, быстрее загрузка (css же кэшируется)
Третье преимущество - можно применить миксин только для определённого media, с классом так не получится и придётся переопределять все свойства.
Четвёртое преимущество - не надо править html разметку при изменении дизайна.

Вообще эти способы существуют параллельно. Классы используют в БЭМ и например в бутстрапе, миксины в Semantic UI и том же бутстрапе.