How do I get masonry to work in angular 8

Question

I am looking to have a pinterest style in my angular 8 app, when I found masonry and its functionalities I was very interested, when I compiled my app, it uploads the images but its effect is not applied.
I searched and I did not find much documentation that can help me, if someone has the same problem and can help me I would appreciate it very much, then I leave my code so that you can give me a hand.

package.json "ngx-masonry": "^1.1.4",

seccion.ts

import { NgxMasonryModule } from 'ngx-masonry';
import { MasonryGalleryModule } from 'ngx-masonry-gallery';

import * as jQuery from 'jquery';

@Component({
  selector: 'app-seccion',
  templateUrl: './seccion.component.html',

  providers:[NoticiasService],

  styleUrls: ['./seccion.component.css']
})

export class SeccionComponent implements OnInit {
public economias: Economia[] ;
public medicinas: Medicina[] ;
public tecnologias: Tecnologia[] ;
public politicas: Politica[];
public url: string;


public myOptions: MasonryOptions = {
  gutter: 10,
  columnWidth: 250
}; 

archive.scss

ngx-masonry{
  width: 30%;
  img{
    max-width: 300px;
  }
} 

html

<div class="cont-noticias">
  <ngx-masonry [options]="{ gutter: 10 }" *ngFor="let economia of economias">
    <div myOptions class="contenedor-contenido">
      <img
        src="{{ url + 'get-image/' + economia.imageM }}"
        class="imagen-muestra"
        alt="{{ economia.title }}"
        min-width="100px"
      />
      <div class="contenedor-info">
        <div>
          <h6 class="subtitulo">{{ economia.subtitulo }}</h6>
        </div>
        <div>
          <span>{{ economia.year }}</span>
        </div>
      </div>
    </div>
  </ngx-masonry>
</div>

imagen html

imagehtml

image cmd

imagecmd

Answer 1

For the latest version of the ngx-masonry library, the following have to be done.

1. Move the *ngFor to the div
2. Add the ngxMasonryItem value to the div

<ngx-masonry [options]="{ gutter: 10 }">
  <div myOptions class="contenedor-contenido" *ngFor="let economia of economias" ngxMasonryItem>
  <!-- ... -->
  </div>
</ngx-masonry>