Got it — now we’re talking about a real production-grade Angular component that’s intended to work like a file viewer hub (à la ng2-pdf-viewer, ngx-doc-viewer, etc.).

You’ve given me enough technical context — inputs, outputs, interfaces, enums — to build a professional, developer-friendly, and npm-optimized README.md.

Below is a fully rewritten version that reads like a modern open-source Angular library README. It’s ready to drop into your repo and publish to npm as-is.

# 📁 MsFilesViewer

**MsFilesViewer** is a flexible, modern Angular library that provides a unified file viewing experience for multiple document and media types — PDFs, images, videos, audio, Office files, Google Docs, YouTube embeds, and more.

It’s designed to be a **drop-in file viewer** for any Angular 18+ project, supporting both remote and blob sources, with full control over visuals, behaviors, and interaction events.

---

## 🚀 Features

- 🧩 Supports multiple file types:
  - PDF, Images, Audio, Video, YouTube
  - MS Office (via Office Viewer)
  - Google Docs (via Google Viewer)
- 🎨 Fully customizable colors and layout
- 🧠 Smart file-type auto-detection
- 💾 Works with URLs, base64, and Blob objects
- ⚙️ Event-based control (open, close, load)
- 🖼️ Built-in loader and dummy preview image
- 🧱 Built for Angular 18+ (Ivy compatible)

---

## 📦 Installation

```bash
npm install ms-files-viewer

🧩 Usage

1. Import the module

in your standalone component or module import the fileViewer component

import { MsFilesViewerComponent } from 'ms-files-viewer';

imports: [MsFilesViewerComponent],

2. Use the component

<ms-files-viewer
  [filesList]="files"
  [fileViewed]="selectedFile"
  [visible]="viewerVisible"
  (onViewClose)="handleViewerClose($event)">
</ms-files-viewer>

3. Example in Component

import { Component } from '@angular/core';
import { MSFileViewer, FileCategory } from 'ms-files-viewer';

@Component({
  selector: 'app-file-view-demo',
  templateUrl: './file-view-demo.component.html'
})

export class FileViewDemoComponent {
  viewerVisible = true;

//make sure ach file have unique ID
  files: MSFileViewer[] = [
    {
      id: 1,
      title: 'Product Guide',
      url: 'https://example.com/docs/product-guide.pdf',
      fileCategory: FileCategory.Pdf
    },
    {
      id: 2,
      title: 'Demo Video',
      url: 'https://example.com/videos/demo.mp4',
      fileCategory: FileCategory.Video
    }
  ];

  selectedFile = this.files[0];

  handleViewerClose(isClosed: boolean) {
    console.log('Viewer closed:', isClosed);
    this.viewerVisible = false;
  }
}

⚙️ Component API

🧭 Inputs

| Input | Type | Default | Description | Required | ---------------------------- | ---------------- | -------------------------------- | ----------------------------------------- | --------- | loaderGif | string | small-loader.gif | Path to loader image | No | dummyImage | string | dummyImg.png | Placeholder when file not loaded | No | filesList | MSFileViewer[] | [] | Array of file objects to browse | Yes | fileViewed | MSFileViewer | {} | Currently selected file object | No | envUrl | string | '' | Environment base URL for files fetch | No | getFileAsBlobEnfPoint | string | '' | API endpoint to fetch files as blob | No | closeOutSideClick | boolean | false | Close viewer on outside click | No | visible | boolean | false | Show/hide viewer | No | disableKeyboardEvents | boolean | false | Disable arrow keys & ESC handling | No | viewerBgColor | string | '' | Background color of viewer container | No | topBgColor | string | '' | Top bar background color | No | middleBgColor | string | '' | Middle section background color | No | bottomBgColor | string | '' | Bottom bar background color | No | fileViewedBgColor | string | '' | Background for file preview area | No | bottomMenuBorderTopClasses | string | 'border-top' | CSS classes for bottom menu border | No | leftArrowBgColor | string | '' | Background color of left navigation arrow | No | leftArrowColor | string | '#fff' | Icon color for left arrow | No | rightArrowBgColor | string | '' | Background color of right arrow | No | rightArrowColor | string | '#fff' | Icon color for right arrow | No | hideLeftArrow | boolean | false | Hide left navigation arrow | No | hideRightArrow | boolean | false | Hide right navigation arrow | No | hideTop | boolean | false | Hide top section | No | showDropdowMenu | boolean | true | Show top dropdown menu | No | hideBottomMenu | boolean | false | Hide bottom toolbar | No | docViewer | ViewerType | 'office' | Default document viewer type | No | showAutoPlayCheckBox | boolean | 'true' | Show auto play next check box | No

📤 Outputs

| Output | Type | Description | | ------------- | ----------------------- | ------------------------------------------------------------ | | onViewClose | EventEmitter<boolean> | Emits when the viewer is closed manually or programmatically |

🧱 Interface Reference

MSFileViewer

export interface MSFileViewer {
  id: number | string;
  title?: string;
  description?: string;
  url: string;
  type?: string;
  base64?: string;
  blobFile?: Blob;
  videoFileBaseSrc64?: string;
  fileCategory: FileCategory;
  viewer?: ViewerType;
  failedToLoad?: boolean;
  previewLg?: string;
  previewSm?: string;
  user?: MSFileUser;
}

MSFileUser

export interface MSFileUser {
  profile?: string;
  name?: string;
}

FileCategory Enum

export enum FileCategory {
  Video = 'video',
  Audio = 'audio',
  Image = 'image',
  Pdf = 'pdf',
  Google = 'google',
  MSOffice = 'msOffice',
  Youtube = 'youtube',
}

ViewerType

export type ViewerType = 'google' | 'office' | 'mammoth' | 'pdf' | 'url';

🧪 Events Example

<ms-files-viewer
  [filesList]="files"
  [visible]="true"
  (onViewClose)="onViewerClosed($event)">
</ms-files-viewer>

onViewerClosed(closed: boolean) {
  if (closed) {
    console.log('Viewer has been closed.');
  }
}

🧰 Integration Tips

• Use Angular’s DomSanitizer when dealing with dynamic URLs.
• To optimize performance, preload common file types or use lazy loading.
• Combine with ngx-doc-viewer or ng2-pdf-viewer for extended format support.
• Works well with dynamic file lists fetched from REST APIs.

🧪 Build & Publish

Build

ng build ms-files-viewer

Publish

cd dist/ms-files-viewer
npm publish --access public

🧾 License

IIS © 2025 [IIS]

Built with ❤️ for developers who need a universal file viewer that just works in Angular.