How to use Atomic Design with Angular?

Question

Is it advisable to use angular with atomic design?

"A lot has been said about creating design systems, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way", Brad Frost.

Please can you provide some code examples to better explain what you're trying to do — Martin Cassidy, Nov 20 '19 at 22:58

score 17 · Answer 1 · answered Nov 21 '19 at 01:03

Due it's component based architecture, it is very easy to achieve Atomic Design in Angular. In fact, some of the Angular best-practices that encourage reuse, maintainability and componentization fit naturally into the Atomic Design paradigm.

Here is how parallels can be drawn between Atomic Design and Angular. The quoted definitions are taken from the "official source": http://atomicdesign.bradfrost.com/chapter-2/

Atoms

[A]toms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.

In Angular, you will make use the basic HTML elements, like the ones listed in the quote above, in your component templates.

Molecules

[M]olecules are relatively simple groups of UI elements functioning together as a unit

Angular best-practices encourage creation of small components that can be reused across the application (or even shared with different applications). If you look at the Angular Material component library, there many examples of premade components, which can be considered "molecules" in Atomic Design.

Organisms

Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms.

In your Angular application you will often have reusable containers or components. Page headers and footers, navigation menus, product preview boxes, etc. are some examples. Those container are made up of smaller components ("molecules"), and are re-used across the application (or even several applications).

Templates

Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.

The definition above, with some minor edits, could as-well be something describing Angular's template system. To create the pages, you place your components ("organisms", "molecules", "atoms") to create the structure of a page.

Pages

Pages are specific instances of templates that show what a UI looks like with real representative content in place.

This is essentially the rendered output of Angular component templates in the browser - the final product of an Angular project so to say.

As you can see, the Atomic Design can be applied to an Angular project. Moreover, there is a lot of overlap between Angular's component architecture and Atomic Design.