Angular 14: ngx-masonry implementation issues

Question

I am using Angular 14 framework and the ngx-masonry library ( https://www.npmjs.com/package/ngx-masonry/v/14.0.1 ), but I am experiencing issues with it not working properly. Could anyone provide assistance or advice on how to resolve this issue? Any help would be greatly appreciated.

The output of this code is a blank screen.

app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule} from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { NgxMasonryModule } from 'ngx-masonry';

import { AppComponent } from './app.component';
import { TitleComponent } from './title/title.component';
import { CdkScrollingComponent } from './cdk-scrolling/cdk-scrolling.component';

@NgModule({
  declarations: [
    AppComponent,
    TitleComponent,
    CdkScrollingComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxMasonryModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {}

cdk-scrolling.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-cdk-scrolling',
  styleUrls: ['cdk-scrolling.component.css'],
  templateUrl: 'cdk-scrolling.component.html',
})

export class CdkScrollingComponent{

  masonryItems = [
      { title: '/assets/memes/meme1.jpg' },
      { title: '/assets/memes/meme2.jpg' },
      { title: '/assets/memes/meme3.jpg' },
      { title: '/assets/memes/meme4.jpg' },
      { title: '/assets/memes/meme5.jpg' },
      { title: '/assets/memes/meme6.jpg' },
      { title: '/assets/memes/meme7.jpg' },
      { title: '/assets/memes/meme8.jpg' },
      { title: '/assets/memes/meme9.jpg' },
      { title: '/assets/memes/meme10.jpg' },
      { title: '/assets/memes/meme11.jpg' },
      { title: '/assets/memes/meme12.jpg' },
      { title: '/assets/memes/meme13.jpg' },
      { title: '/assets/memes/meme14.jpg' },
      { title: '/assets/memes/meme15.jpg' },
    ];

    constructor() {}
}

cdk-scrolling.component.html

<ngx-masonry>
  <div ngxMasonryItem class="masonry-item" *ngFor="let item of masonryItems">
    {{item.title}}
  </div>
</ngx-masonry>

cdk-scrolling.component.css

.masonry-item { 
  width: 100%;
  padding: 10px;
}

Answer 1

It seems that you might have a problem with the path of the images.

In your code, you are providing the path of the images as '/assets/memes/meme1.jpg', '/assets/memes/meme2.jpg', etc. It seems like these images are located in the assets folder under the project root directory.

In that case, you need to make sure that the path of the images is correct and that the images are indeed present in that location.

Another possible issue could be that the images are not loading due to a problem with the CORS (Cross-Origin Resource Sharing) policy. The browser may block the images from loading if it detects that they are coming from a different origin than the one the app is being served from. You can check the browser's developer console for any error messages related to CORS.

You can also try to use the ng serve --prod command to see if the problem persists and if the problem is with the development server or not.

Also, you can try to change the path of the images to use relative path instead of absolute path like

{ title: 'assets/memes/meme1.jpg' }

It will help you to understand the problem is with the path of the images or anything else.