Component Driven Architecture

• Components are small, encapsulated pieces of software that can be reused in many different contexts
• Angular strongly encourages the component architecture by making it easy (and necessary) to build out every feature of an app as a component
• Angular components are self encapsulated building blocks that contain their own templates, styles, and logic so that they can easily be ported elsewhere

To communicate between Parent and Child Components, we can use Input and Output Decorators.

Component Contracts

• Represents an agreement between the software developer and software user – or the supplier and the consumer
• Input and Output define the interface of a Components
• These then act as a contract to any component that wants to consume it
• Also act as a visual aid so that we can infer what a component does just by looking at its inputs and outputs

Container and Presentational Components

• Container components are connected to services
• Container components know how to load their own data, and how to persist changes
• Presentational components are fully defined by their bindings
• All the data goes in as inputs, and every change comes out as an output
• Create as few container components/many presentational components as possible

// Presentational Component
export class ItemsListComponent {
  @Input() items: Item[];
  @Output() selected = new EventEmitter();
  @Output() deleted = new EventEmitter();
}

// Container Component
export class ItemsComponent implements OnInit {
  items: Array<Item>;
  selectedItem: Item;
  constructor(private itemsService: ItemsService) { }
  ngOnInit() { }
  resetItem() { }
  selectItem(item: Item) { }
  saveItem(item: Item) { }
  replaceItem(item: Item) { }
  pushItem(item: Item) { }
  deleteItem(item: Item) { }
}

The state should flow down, i.e.

And the events should flow up, i.e.