Angular 8: Select first element of ng-content

Question

I want to create a multi step form component that needs to display the ng-content.

It should display it not at once but only one per step.

The following code should therefore result in a two step form.

<ion-content>
  <div class="centered">
    <app-multi-step-formular>
      <div>
        <!-- Step One -->
        <input type="text"/>
        <input type="password"/>
      </div>
      <div>
        <!-- Step Two -->
        <input type="text"/>
        <input type="password"/>
      </div>
    </app-multi-step-formular>
  </div>
</ion-content>

My current approach looks like this:

<div class="multi-step-form">
  <div class="content">
    <!-- Initially the first div is displayed -->
    <ng-content select="div:1"></ng-content>
    <!-- User clicks next, then second div is displayed -->
    <ng-content select="div:2"></ng-content>
  </div>
  <!-- After clicking the next button, the next div from ng-content should be displayed-->
  <button (click)="nextStep()>
    Continue
  </button>
</div>

References The slides from Ionic are a good example of what I want to achieve in a technicals POV.

I am really thankful for any help.

Answer 1

the "clasic" is create a directive,

import { Directive } from '@angular/core';

@Directive({
  selector: '[custom-slide]'
})
export class CustomSlideDirective {
  constructor() { }
}

Then you only need ask about ContentChildren

   @ContentChildren(CustomSlideDirective) slides!: QueryList<CustomSlideDirective>;

Then, this.slides.first is the first slide (be carefully you need use after view init)

Yes, this oblige to write some like

   <app-multi-step-formular>
      <div custom-slide>
           ....
      </div>
      <div custom-slide>
           ....
      </div>
    </app-multi-step-formular>