# ng-flyweight-gallery ✨

`ng-flyweight-gallery` is a lightweight and customizable Angular component library for creating responsive media galleries. It supports images and videos, with features like autoplay, loop for videos and a responsive layout.

## 📦 Installation

To install the package, run the following command in your Angular project:

```bash
npm install ng-flyweight-gallery
```

## 🛠️ Usage

### 1. **Import the Module**

In your `app.module.ts`, import `NgFlyweightGalleryModule`:

```typescript
import { NgFlyweightGalleryModule } from 'ng-flyweight-gallery';
```

Then, add it to the `imports` array of your `@NgModule`:

```typescript
@NgModule({
  declarations: [AppComponent],
  imports: [NgFlyweightGalleryModule],  // Add here
  bootstrap: [AppComponent],
})
export class AppModule {}
```

### 2. **Use the Gallery Component**

In your component’s HTML file (e.g., `app.component.html`), use the gallery component:

```html
<ng-flyweight-gallery [mediaItems]="mediaItems"></ng-flyweight-gallery>
```

### 3. **Define the `mediaItems` Array**

In your component’s TypeScript file (e.g., `app.component.ts`), define the `mediaItems` array:

```typescript
import { Component } from '@angular/core';
import { MediaItem } from 'ng-flyweight-gallery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  mediaItems: MediaItem[] = [
    {
      type: 'image',
      source: 'https://example.com/image1.jpg',
      title: 'Sample Image 1',
    },
    {
      type: 'video',
      source: 'https://example.com/video1.mp4',
      title: 'Sample Video 1',
      autoplay: true,
      loop: true,
    },
  ];
}
```

---

## 🖼️ Example Media Item

Here’s how to define media items:

```typescript
mediaItems: MediaItem[] = [
  {
    type: 'image',
    source: 'https://example.com/image.jpg',
    title: 'Sample Image',
  },
  {
    type: 'video',
    source: 'https://example.com/video.mp4',
    thumbnail: 'https://example.com/video-thumbnail.jpg',
    title: 'Sample Video',
    autoplay: true,
    loop: true,
  },
];
```

---

## 🎨 Customization

You can easily modify the component’s styles directly or override them globally in your project. The gallery layout and lightbox are fully customizable.

---

## 📝 License

This library is released under the **MIT License**.