Angular & CSS Grid: Dynamic Grid Properties

Angular @HostBinding with CSS Grid

Introduction

Source Code / Live Demo: StackBlitz 🚀

Article Goal: Investigate one way to dynamically modify CSS Grid Properties using Angular’s @HostBinding Decorator.

Article Topics:

• Use CSS-Grid with Angular Components by leveraging the :host selector
• How to adjust CSS Grid Properties such as column-template-rows and gap with TypeScript dynamically.
• Angular’s DOM Sanitizer, why we have to bypass security and some guidelines we should follow when doing so.

Our Application

CSS Grid (Container and Items)

Our CSS Grid will be composed of two Angular components. A parent/container and a child/item. CSS Grid is a relatively new convention for writing CSS that allows us to build reactive grids to place and align elements.

Using the :host selector, Angular Components can select themselves. We can use this concept to treat our components as a grid-container or a grid-item and avoid using wrapper divs. 🎁

• display: grid: Defines the element as a grid-container
• grid-template-rows: Defines a maximum number of rows and row-size
• grid-auto-flow: column: Tells the grid to create a new column (Instead of a new row) when it runs out of space vertically.
• gap: Defines space between each item.