I hope you are very well, this will be my second post, so I will try to be as detailed as possible. My problem is the following, 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
image cmd
