Sharing Top Content from the Angular-sphere.

#Angular Architecture – Container vs Presentational Components Common Design Pitfalls

#Angular Architecture - Container vs Presentational Components Common Design Pitfalls

  • So let’s break it down what we have in this top-level component and how it’s currently designed: – – – the component has router dependencies injected, but also some application-specific services – the component does not have any variables that keep direct references to data, like lessons or courses -…
  • The data then gets applied to a tree of local components that exist under the top-level component of this route: – – – multiple types of data, including the user, the lessons, and the courses are being passed to the course-detail-header component, as well as to a list of lessons….
  • A Presentational Component one level deeper the Component Tree – – The newsletter component is also a presentational component, because it takes an input, displays a subscription form and emits an event upon subscription: – – – – So this is the design we currently have for the newsletter component,…
  • A Potential issue with this design – – You might have noticed a couple of things in the newsletter component that are similar to the course-detail-header component: – – – the input property first name – the output event subscribe – – – Both of these elements are repeated in…
  • Design Issue 2 – Custom Event Bubbling Over the Local Component Tree – – As we can see, the subscribe event is being also repeated at multiple levels of the component tree, this is because by design custom events do not bubble.

This post is part of the ongoing Angular Architecture series, where we cover common design problems and solutions at the level of the View Layer and the Service layer. Here is the full series:

This post is part of the ongoing Angular Architecture series, where we cover common design problems and solutions at the level of the View Layer and the Service layer. Here is the full series:

Let’s then talk a bit about Angular Component Architecture: We are going to present a very common component design and a potential design issue that you might run into while applying it.

A Common Component Design (And a potential issue with it)

A really important aspect of Angular application development is application component design: How to combine different types of components together, when to use a component vs a directive, how and when to extract functionality from components into directives, etc.

Angular Components provide a lot of functionality that can be used and combined in many different ways. This allows us to adopt a large variety of application designs depending on the situation.

In this post, we are going to talk about one particular type of design that we often hear about.

Container Components vs Presentational Components

The design scenario that we will be talking about is the separation of components between Container Components vs Presentational Components.

This is a popular design that is now being used…

Angular Architecture

Comments are closed, but trackbacks and pingbacks are open.