Can Angular 4 have dynamic ng-content with dynamic select

Question

Can angular 4 have dynamic ng-content. Can some provide a way to remove static slide1,slide2 so that it can be implemented by *ngFor

Content of child component:

<ion-slides [pager]="true" #Slides (ionSlideDidChange)="onSlideChanged()">
<ion-slide class="slide1">
  <ng-container  *ngIf="!isMenuOpen">
     <ng-container *ngTemplateOutlet="slide1"></ng-container>  
  </ng-container>
</ion-slide>
<ion-slide class="slide2">
    <ng-container  *ngIf="!isMenuOpen">
       <ng-container *ngTemplateOutlet="slide2"></ng-container>
    </ng-container>
</ion-slide>
</ion-slides>
<ng-container *ngIf="isMenuOpen">
    <div class="sidemenu-open-slide slide1" *ngIf="isMenuOpen && slideActiveIndex==0">
       <ng-container *ngTemplateOutlet="slide1"></ng-container>
    </div>
    <div class="sidemenu-open-slide slide2" *ngIf="isMenuOpen && slideActiveIndex==1">
       <ng-container *ngTemplateOutlet="slide2"></ng-container>
    </div>
    <div class="side-menu-slider-pagination">
       <button class="swiper-pagination-bullet" *ngFor="let page of [0,1]" style="margin: 0 5px;" [ngClass]="{'swiper-pagination-bullet-active':slideActiveIndex==page}"></button>
    </div>
</ng-container>
<ng-template #slide1>
   <ng-content select="[slide1]"></ng-content>
</ng-template>
<ng-template #slide2>
   <ng-content select="[slide2]"></ng-content>
</ng-template>

In My parent component

 <customslider slides="2">
    <div slide1>

    </div>
    <div slide2>

    </div>
 </customslider>

I just want that my the below case should be handled

<customslider slides="N">
    <div slide1>

    </div>
    <div slide2>

    </div>
    <div slideN>
        nth slide
    </div>
 </customslider>

Answer 1

Sorry, you want something like?

import { Component, OnInit,Input } from '@angular/core';

@Component({
  selector: 'app-div-for',
  template:`
  <div *ngFor="let i of items" [ngClass]="'slide'+i">
  div-for works!
</div>`,
  styleUrls: ['./div-for.component.css']
})
export class DivForComponent implements OnInit {

  items:any[];
  @Input('cont') set cont(value:number){ //get input to fill "items"
    console.log(value);
    this.items=[];
    for (let i=0;i<value;i++)
       this.items.push(i);
  }
  constructor() { }
  ngOnInit() {}
}

in another component you use, e.g.

<app-div-for [cont]="5"></app-div-for>