I have a component with this template:

```
<ion-card *ngIf="isActive">
  <ion-card-header>{{question.question}}</ion-card-header>

  <ion-grid>
    <ion-row>
      <ion-col *ngFor="let answer of question.answers">
        <button ion-button outline (click)="answer.action()">{{answer.text}}</button>
      </ion-col>
    </ion-row>
  </ion-grid>

</ion-card>

```

And the code:

```
@Component({
  selector: 'extra-card',
  templateUrl: 'extra-card.html'
})
export class ExtraCard {
  public static readonly EXTRA_CARD_TYPE_1: string = "type_1";
  public static readonly EXTRA_CARD_TYPE_2: string = "type_2";

  @Input() type: string = ExtraCard.EXTRA_CARD_TYPE_1;

  isActive: boolean = true;
  question;

  constructor(
    private ga: GoogleAnalytics,
    private socialSharing: SocialSharing,
    private appRateService: AppRateService
  ) {}

  ngOnInit() {
    switch (this.type) {
      case ExtraCard.EXTRA_CARD_TYPE_1:
        this.makeExtraCardType1();
        break;

      case ExtraCard.EXTRA_CARD_TYPE_2:
        this.makeExtraCardType2();
        break;
    }
  }

  private makeExtraCardType1() {
    this.question = {
      question: "Some question",
      answers: [
        {text: "Answer 1", action: () => {this.action1Type1();}},
        {text: "Answer 2", action: () => {this.action2Type1();}},
        {text: "Answer 3", action: () => {this.action3Type1();}}
      ]
    };
  }

  private makeExtraCardType2() {
    this.question = {
      question: "Some question",
      answers: [
        {text: "Answer 1", action: () => {this.action1Type2();}},
        {text: "Answer 2", action: () => {this.action2Type2();}},
      ]
    };
  }

...

}

```

**What does this code do?**

A sequence of questions is shown to the user. Each question has several options. In the end of the sequence we do some action and skip this card.

**What is the problem?**

In this example I have 2 types of extra cards, but I want to have more (5, 10, 20, etc). In this case my component code will be growing too quickly.

**What I want**

I want to separate the logic of different question sequences. But I'm facing a problem with dependency injection for some unique actions in sequences. And I want to have a single component and use it like this:

```
<extra-card [type]="type_1"></extra-card>

```

Also, I want to avoid excessive dependency injections in the base component (in case with passing DI instances to question model).