import { Component , Input } from '@angular/core' ; import { BsModalRef , BsModalService } from 'ngx-bootstrap' ; import { GalleryModalComponent } from '../gallery-modal/gallery-modal.component' ; @ Component ( { selector : 'app-gallery-item' , template : `
    <div class="card p-3">
      <a href="javascript:void(0)" class="mb-3" (click)="open(photo, user, index)">
        <img [attr.src]="photo.small" alt="Photo by {{ user.name }} {{ user.surname }}" class="rounded">
      </a>

      <div class="d-flex align-items-center px-2">
        <ui-avatar size="md" [image]="user.photo" class="mr-3"></ui-avatar>
        <div>
          <div>{{ user.name }} {{ user.surname }}</div>
          <small class="d-block text-muted">{{ index | random: 3: 20 | round }} days ago</small>
        </div>
        <div class="ml-auto text-muted">
          <a href="javascript:void(0)" class="icon"><i class="fe fe-eye mr-1"></i>
            {{ index | random: 3: 20 | round }}
          </a>
          <a href="javascript:void(0)" class="icon d-none d-md-inline-block ml-3"><i
            class="fe fe-heart mr-1"></i>
            {{ index | random | round }}
          </a>
        </div>
      </div>
    </div>
  ` , styles : [ ] , } ) export class GalleryItemComponent { @ Input ( ) public user ; @ Input ( ) public photo ; @ Input ( ) public index ; public modalRef : BsModalRef ; constructor ( private modalService ) { } public open ( photo , user , index ) { const initialState = { photo , user , index , } ; this . modalRef = this . modalService . show ( GalleryModalComponent , { initialState , class : 'modal-lg' , } ) ; this . modalRef . content . closeBtnName = 'Close' ; } }