# 5.10: Adding Photo Gallery

Let's add a photo gallery to our `Photos` tab.

To do this we'll use another library: [ngx-gallery](https://www.npmjs.com/package/ngx-gallery).

Read the docs if you would like to customize it.

## Installing and Importing ngx-gallery

In the root of your `SPA` project, run the following command:

```
npm install ngx-gallery --save
```

Import it into your `app.module.ts` file and add it to the imports array:

```typescript
import { NgxGalleryModule } from 'ngx-gallery';

//  ...

imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    NgxGalleryModule,

//  ...
```

## Adding Gallery Logic

Next, open up the `member-detail.component.ts` file and start by adding two properties:

```typescript
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
```

Next, specify the options and the images in `ngOnInit()`:

```typescript
ngOnInit() {
    this._route.data.subscribe(data => {
      this.user = data['user'];
    });

    this.galleryOptions = [
      {
        width: '700px',
        height: '700px',
        imagePercent: 100,
        thumbnailsColumns: 4,
        imageAnimation: NgxGalleryAnimation.Slide,
        preview: false
      }
    ];

    this.galleryImages = this.getImages();
}
```

And, finally, we'll implement the `getImages()` method to populate an array according to what `ngx-gallery` is expecting.

```typescript
getImages() {
    const imageUrls = [];

    for (let i = 0; i < this.user.photos.length; i++) {
      imageUrls.push({
        small: this.user.photos[i].url,
        medium: this.user.photos[i].url,
        big: this.user.photos[i].url,
        description: this.user.photos[i].description
      });
    }

    return imageUrls;
}
```

## Add Gallery to the Template

In `member-detail.component.html`, currently we have a `<p>` with "Photos will go here."

Replace that with the following `ngx-gallery` directive:

```markup
<tab heading="Photos">
    <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
</tab>
```

Right now, it doesn't have much functionality. But, it will improve once we have a way for users to add more photos. Coming soon!