How to Implement Masonry Layouts in Angular Applications Using Component-based Architecture

Implementing Masonry layouts in Angular applications can greatly enhance the visual appeal of image galleries, portfolios, and content grids. Using Angular’s component-based architecture allows for modular, reusable, and maintainable code. This guide will walk you through the steps to create a Masonry layout using Angular components.

Understanding Masonry Layouts

A Masonry layout arranges elements in a grid where items are positioned based on available vertical space, similar to a bricklayer’s pattern. This layout is dynamic and adjusts to different screen sizes, making it ideal for responsive designs.

Setting Up Angular Components

To implement a Masonry layout, start by creating a dedicated component that will handle the grid display. Use Angular CLI to generate components:

masonry-grid
masonry-item

The masonry-grid component will serve as the container, while masonry-item components will represent individual items.

Implementing the Masonry Grid Component

In masonry-grid.component.ts, define the layout logic. You can use CSS columns or a JavaScript library like Masonry.js for more advanced layouts. Here’s an example using CSS columns:

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

@Component({
  selector: 'app-masonry-grid',
  templateUrl: './masonry-grid.component.html',
  styleUrls: ['./masonry-grid.component.css']
})
export class MasonryGridComponent {
  @Input() items: any[] = [];
}

CSS for Masonry Layout

In masonry-grid.component.css, add styles to create the Masonry effect:

.masonry {
  column-count: 3;
  column-gap: 1em;
}

@media (max-width: 768px) {
  .masonry {
    column-count: 1;
  }
}

Creating Masonry Items

The masonry-item component will display individual content blocks. Its template might look like this:

<div class="masonry-item">
  <img [src]="item.image" alt="Image">
  <h4>{{ item.title }}</h4>
  <p>{{ item.description }}</p>
</div>

Using the Components

In your main template, include the Masonry grid and pass the data:

<app-masonry-grid [items]="contentItems"></app-masonry-grid>

Ensure contentItems is an array in your parent component, containing objects with image, title, and description.

Conclusion

Using Angular’s component architecture combined with CSS columns provides a simple yet effective way to implement Masonry layouts. For more advanced features like drag-and-drop or filtering, consider integrating JavaScript libraries such as Masonry.js within your Angular components.

Table of Contents