Sử dụng Masonry trong Angular

Hôm nay mình sẽ hướng dẫn các bạn sử dụng thư viên ngx-masonry để tạo ra các feed liên tục, tự động sắp xếp & dóng hàng theo chiều cao của mỗi feed.

Demo | Mã nguồn (đang tải)

1. Cài đặt

Việc đầu tiên là các bạn hãy cài đặt thư viện ngx-masonry vào trong project của bạn

npm install ngx-masonry --save

Nếu như bạn đang sử dụng SystemJS thì phải add ngx-masonry và masonry-layout vào cấu hình:

packages: {
"ngx-masonry": { "defaultExtension": "js", "main": "index" }
},
map: {
"ngx-masonry": "node_modules/ngx-masonry",
"masonry-layout": "node_modules/masonry-layout/dist/masonry.pkgd.js"
}

2. Sử dụng

Việc sử dụng cực đơn giản, hãy đưa NgxMasonryModule vào trong app.modules.ts:

import { NgxMasonryModule } from ‘ngx-masonry’;

import { NgxMasonryModule } from 'ngx-masonry';
 
@NgModule({
  imports: [
    NgxMasonryModule
  ]
})

Sau đó, áp dụng Masonry vào trong Component của bạn:

@Component({
  selector: 'my-component',
  template: `
     <ngx-masonry>
       <div ngxMasonryItem class="masonry-item" *ngFor="let item of masonryItems">
        {{item.title}}
      </div>
     </ngx-masonry>
     `,
  styles: [
    `
       .masonry-item { width: 200px; }
     `
  ]
})
class MyComponent {
  masonryItems = [
    { title: 'item 1' },
    { title: 'item 2' },
    { title: 'item 3' },
    { title: 'item 4' },
    { title: 'item 5' },
    { title: 'item 6' }
  ];
}

3. Cấu hình

Masonry cung cấp các thuộc tính nằm trong Masonry Options, các bạn có thể tham khảo để tinh chỉnh cho Masonry của mình:

• itemSelector: string;
• columnWidth: number | string;
• gutter: number;
• percentPosition: boolean;
• stamp: string;
• fitWidth: boolean;
• originLeft: boolean;
• originTop: boolean;
• containerStyle: string;
• transitionDuration: string;
• resize: boolean;
• initLayout: boolean;
• horizontalOrder: boolean;

Ví dụ

Đưa trực tiếp vào trong đối tượng masonry:

<ngx-masonry [options]="{ transitionDuration: '0.8s' }"></ngx-masonry>

Hay sử dụng kế thừa từ cha:

import { NgxMasonryOptions } from 'ngx-masonry';
 
public myOptions: MasonryOptions = {
  transitionDuration: '0.8s'
};

<ngx-masonry [options]="myOptions"></ngx-masonry>

4. Ngoài ra

1. imagesLoaded

Các bạn có thể sử dụng thêm imagesLoaded để làm việc với hình ảnh

NOTE: Will throw error if global "imagesLoaded" not available.

Quá trình hiển thị ảnh sẽ được delay lại để chờ quá trình download ảnh xong, để sử dụng imagesLoaded chúng ta dùng như sau:

<ngx-masonry [useImagesLoaded]="true"></ngx-masonry>

Thêm thư viện vào file index.html nhé các bạn

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

Xem phiên bản mới nhất của ImagesLoaded.

2. updateLayout

ngx-masonry cung cấp cho chúng ta 1 kiểu input là updateLayout, giúp chúng ta kiểm tra được sự kiện khi Masonry có thay đổi về mặt cấu trúc layout nhứ: thêm & bớt feed nào đó. updateLayout sẽ không được áp dụng khi lần đầu tiên masonry được thực thi.

<ngx-masonry [updateLayout]="updateMasonryLayout"></ngx-masonry>

Khi updateMasonryLayout đã được cập nhật, phương thức layout() sẽ được gọi lại.

5. Một số Event cần lưu ý

layoutComplete: EventEmitter

Đặt theo dõi sau khi tất cả các feed đã được xắp xếp.

http://masonry.desandro.com/events.html#layoutcomplete

removeComplete: EventEmitter

Theo dõi sau khi 1 feed đã bị xoá.

http://masonry.desandro.com/events.html#removecomplete

6. Câu hỏi đặt ra

Why is it rendering the tiles twice in prod?

This could be the case because of angulars build optimizer. A currently working “workaround” is disabling the build-optimizer in the angular.json file.

{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
            "production": {
              "buildOptimizer": false
            }
          }
        }
    }
  }
}
 
For more information refer to this issue:
https://github.com/gethinoakes/ngx-masonry/issues/8

Mr386, Chúc các bạn thành công!