title: How to add custom horizontal and vertical scrolling in Angular 9?
body: <p>I have an angular app , in which a user uploads a file and then I show the contents of the file on the UI. The file might be very long, so I need vertical scrolling and also for longer lines, I would like to have horizontal scrolling. So I think I will need a box in which I'll show the content with horizontal and vertical scrolling.</p>
  
  <p>Code for <code>app.component.ts</code></p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
  
    fileContent: string = '';
  
    public onChange(fileList: FileList): void {
      let file = fileList[0];
      let fileReader: FileReader = new FileReader();
      let self = this;
      fileReader.onloadend = function(x) {
        self.fileContent = fileReader.result;
      }
      fileReader.readAsText(file);
    }
  }
  </code></pre>
  
  <p>Code for <code>app.component.html</code></p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;input type="file" (change)="onChange($event.target.files)"&gt;
  
  &lt;div&gt;
    &lt;h3&gt;File Content&lt;/h3&gt;
    &lt;pre&gt; {{fileContent}} &lt;/pre&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I add horizontal and vertical scrolling ? Thanks in advance.</p>