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.