title: Remove the file extension of each file angular 6
body: <p>The HTML is written where I am getting the file name but i want to get rid of the file extension and also store the files in an array and access them in the UI.    </p>
  
  <pre><code>&lt;div class="myReadingListContainer"&gt;
          &lt;div class="readingList"&gt;
                  My Reading List
          &lt;/div&gt;
          &lt;div class="myReadingList"&gt;
                  &lt;div class="uploadWrap"&gt;
                          &lt;input type="file" #file (change)="onChange(file.files)" class="fileUploadInput" /&gt;
                          &lt;div class="innerText"&gt;
                                  &lt;img src="assets/img/my_reading_list/Add.svg" class="addIcon"&gt;
                                  &lt;h6 class="addFile"&gt;Add Files&lt;/h6&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div *ngFor="let file of fileList"&gt;
                          &lt;div class="selectedFile"&gt;
                                  &lt;div class="documentName"&gt;
                                          {{file.name}}
                                  &lt;/div&gt;
                                  &lt;span *ngIf="file.type === 'application/pdf'"&gt;
                                          &lt;img src="assets/img/my_reading_list/PDF.svg" class="fileTypeImage"&gt;
                                  &lt;/span&gt;
                                  &lt;span *ngIf="file.type === 'application/vnd.ms-excel'"&gt;
                                          &lt;img src="assets/img/my_reading_list/Excel.svg" class="fileTypeImage"&gt;
                                  &lt;/span&gt;
                                  &lt;div class="readingStatus"&gt;
                                          20/35 Pages
                                  &lt;/div&gt;
                                  &lt;div class="progress"&gt;
                                          &lt;div class="progressBar"&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The typescript file is written like this. Since I am new to Angular 6 any help is really appreciated, thanks in advance</p>
  
  <pre><code>import { Component, OnInit } from "@angular/core";
  
      @Component({
        selector: "app-myReadingList",
        templateUrl: "./myReadingList.component.html",
        styleUrls: \["./myReadingList.component.scss"\]
      })
      export class MyReadingListComponent implements OnInit {
        //localUrl: String;
        fileList: any = \[\];
        files: any;
        constructor() {}
        onChange(files: FileList) {
          console.log(files);
          this.files = files;
          this.fileList.push(files\[0\]);
          this.fileList.forEach(file =&gt; {
            let temp = file.name.split(".");
            file.name = temp.splice(0, temp.length - 1).join(".");
          });
          console.log(this.fileList);
        }
        ngOnInit() {}
      }
  </code></pre>