title: how to create popup in angular
body: <p>I need help</p>
  
  <p>I am creating a gallery with angular and magnific popup but it does not work at all well.</p>
  
  <p>When I enter the html route I need to refresh the search engine so that it works otherwise it does not work.</p>
  
  <p>I do not understand what the problem is.</p>
  
  <p>thanks</p>
  
  <p><img src="https://i.stack.imgur.com/mayl9.png" alt="1">
    <img src="https://i.stack.imgur.com/bqAwL.png" alt="2">
    <img src="https://i.stack.imgur.com/YNLNs.png" alt="3">
    <img src="https://i.stack.imgur.com/4J4Nr.png" alt="4"></p>
  
  <p>this is my service.ts</p>
  
  <pre><code> import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class AgustinNietoService {
  
    private agustinNieto: AgustinNieto [] = [
  
  { img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00001.jpg' },
  { img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00002.jpg' },
  { img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00003.jpg' },
  { img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00004.jpg' },
  { img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00005.jpg' },
  { img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00006.jpg' },
  { img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00007.jpg' },
  { img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00008.jpg' },
  { img: 'assets/img/fotografos/agustin-nieto-web/agustin-nieto-00036.jpg' }
  
    ];
  
    constructor() {
  console.log('Estamos trabajando;');
    }
    getAgustinNieto() {
      return this.agustinNieto;
    }
  }
  
  export interface AgustinNieto {
    img: string;
  }
  </code></pre>
  
  <p>Este es el HTML</p>
  
  <pre><code>&lt;div id="modal-magic" class="container-fluid"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-2"&gt;
          &lt;div class="gallery" *ngFor="let agustinNieto of agustinNieto"&gt;
              &lt;a class="view" href="{{ agustinNieto.img }}"&gt;&lt;img class="animated fadeIn" id="img-all-hzt" src="{{ agustinNieto.img }}" alt=""&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p></p>
  
  <p>This is code jquery </p>
  
  <pre><code>$(document).ready(function() {
  
  $('.view').magnificPopup({
      type: 'image',
      // other options
      preloader: true,
      gallery: { enabled: true },
      removalDelay: 900,
      callbacks: {
          beforeOpen: function() {
              this.st.mainClass = this.st.el.attr('data-effect');
          }
      },
  });
  </code></pre>
  
  <p>});</p>
  
  <p>this is a component.ts</p>
  
  <pre><code>import { Component, OnInit} from '@angular/core';
  import { AgustinNietoService, AgustinNieto } from '../../../../services/agustin-nieto.service';
  
  
  @Component({
    selector: 'app-all-view-agustin-nieto',
    templateUrl: './all-view-agustin-nieto.component.html',
    styleUrls: ['./all-view-agustin-nieto.component.css']
  })
  export class AllViewAgustinNietoComponent implements OnInit {
  
  agustinNieto: AgustinNieto[] = [];
  
    constructor( private _agustinNietoService: AgustinNietoService ) {
  
    }
  
   ngOnInit() {
  
   this.agustinNieto = this._agustinNietoService.getAgustinNieto();
  
   console.log( this.agustinNieto);
   }
  
  }
  </code></pre>