1. Atoms

Build smallest UI components

• Inputs must be very generic: label, title, hidden, disabled, item
• Outputs must be very generic: clicked, closed, focused
• No backend models here
• Goal: maximize reusability

Atom examples

• Button
• Input
• ListItem

2. Molecules

Build UI components using atoms

• State for UI purposes only
• The data are given from inputs (no API calls yet)
• Wire atomic components together to build more complex UI
• Inputs and Outputs are still very generic
• Goal: encapsulate UI logic + maximize reusability

Molecule examples

• SearchBox
• List
• TabsView
• Menu

3. Organisms

Build UI components using molecules

• State only for UI purposes
• No API calls yet
• You start seeing backend models (user, bookings...) in Inputs and Outputs
• Wire atoms and molecules to build UI for your business
• Goal: encapsulate complex UI logic

Organism examples

• UserEditForm
• BookingList
• EventCalendar

4. Containers

Add life to organisms!

• Wrap organisms to make them smart
• Provide data to organism Inputs: by calling the APIs or linking your state manager
• React to organism outputs
• Heavy usage of dependency injection
• No UI here
• Goal: add business logic to UI

Container examples

• <YOUR_ORGANISM>Container

5. Layouts

The skeleton of your page

• @ViewChild, @ViewChildren and <ng-content> are your best friends here
• Goal: reuse common layouts, add consistency to your pages

Layout examples

• TwoColumnsLayout
• RootLayout (w/ Header and Footer)

6. Pages

Link components to Angular Route

• The first child is usually a layout
• They are called by Angular router
• Goal: wire routes to UI

Page examples

• /events/overview → EventOverviewPage
• /users/{id} → EditUserPage