Angular ngFor with min length

<!DOCTYPE html>

<html>
  <head>
    <script src="./lib/main.ts"></script>
  </head>

  <body>
    <my-app>
    </my-app>
  </body>
</html>

//our root app component
import { Component, NgModule, VERSION, Pipe, PipeTransform } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

const demoItem = {imagePath: "https://external-content.duckduckgo.com/iu/?u=https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/MontagneDesErables2018.jpg/220px-MontagneDesErables2018.jpg&f=1&nofb=1"};

@Pipe({name: 'lengthSlice'})
export class LengthSlicePipe  implements PipeTransform {
  public transform(arr: Array<any>, minLength: number, maxLength: number) {
    let newArr = arr.slice();
    if (minLength && newArr.length < minLength) {
      newArr.length = minLength;
    } else if (maxLength && newArr.length > maxLength) {
      newArr.length = maxLength;
    }
    return newArr;
  }
}

@Component({
  selector: 'my-app',
  template: `
    <h2>With component logic</h2>
    <div class="wrapper">
      <img *ngFor="let item of someData"
      [src]="item?.imagePath || 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fmaestroselectronics.com%2Fwp-content%2Fuploads%2F2017%2F12%2FNo_Image_Available.jpg&f=1&nofb=1'"
      style="border-radius: 50%; width: 40px; height: 40px;" />
    </div>

    <h2>With pipe</h2>
    <div class="wrapper">
      <img *ngFor="let item of someData | lengthSlice:4:6"
      [src]="item?.imagePath || 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fmaestroselectronics.com%2Fwp-content%2Fuploads%2F2017%2F12%2FNo_Image_Available.jpg&f=1&nofb=1'"
      style="border-radius: 50%; width: 40px; height: 40px;" />
    </div>
    
    <button (click)="randomize()">Randomize content of array</button>
  `, styles: [`
    :host {
      display: flex;
      flex-direction: column;
    }
    .wrapper {
      display: flex;
      flex-direction: row;
    }
  `],
})
export class App {
  public someData = [];
  constructor() {
    this.randomize();
  }

  public randomize() {
    const x = Math.floor(Math.random() * 8);
    this.someData = [];

    for(let i = 0; i < x; i++) {
      this.someData.push(demoItem);
    }
    

    // This is the important part: If the lenght of current items is < 4, 
    // we have to extend the array to have a length of four. If you do not 
    // want the length of the array to be > 4, just remove the 
    // if-condition.
    if (this.someData.length < 4) {
      this.someData.length = 4;
    }
  }
}

@NgModule({
  imports: [BrowserModule],
  declarations: [App, LengthSlicePipe],
  bootstrap: [App],
})
export class AppModule {}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

h1,
p {
  font-family: sans-serif;
}

{
  "name": "@plnkr/starter-angular",
  "version": "1.0.3",
  "description": "Angular starter template",
  "dependencies": {
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "core-js": "2.6.11",
    "rxjs": "6.5.4",
    "zone.js": "0.10.2"
  },
  "main": "./lib/main.ts",
  "plnkr": {
    "runtime": "system",
    "useHotReload": true
  }
}

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}