Presentational Components. After quite bit of search on components I came across terms called Smart and Dumb components, so would like to share my thoughts upon it. Container components are connected to services and know how to load their own data and persist changes. This project was generated with Angular CLI version 7.0. Here's what you'd learn in this lesson: Lukas reviews container and presentational components. Do use the OnPush change detection strategy. Presentational components should be completely unaware that Redux is being used: as far as they're concerned, "data happens" and their job is to render it. Simulation of user interaction in unit tests. In this article I will offer some basic guidelines on how to create a scalable AngularJS application with reusable, Mocking of Observable-based Services. Container Components. The app component is the one that provides the data for children components input and that is “listening” to the children components output. 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. Continuous Integration with Travis CI We’re not perfect testers at Versett, but we believe that if we write modular chunks of testable code, it will age more gracefully than if we didn’t. They are fondly called “Smart” components. Coding rules Any additional npm package, utility or pattern to be implemented must be discussed in the team for a … Shared components. 3m 18s. Redux is not only for React, you can use it with Angular too or other view libraries. As a result, the components in Angular can be divided into two Container and Presentational components. Provides data and behavior to presentational components and other container components. Different component types in Angular. This is a popular design that is now being used more and more in the Angular ecosystem since now Angular supports the Component model. Tour of Heroes Angular app using the Model-View-Presenter pattern. Here is the full series: View Layer Architecture - Smart Components vs Presentational Components View Layer Architecture - Container vs Presentational In React, a presentational component is a component that just renders HTML. Photo by Sebastian Muller on Unsplash. Unit Testing of Smart or Container Components. It also allows testing if you know how to implement a presentational/container component architecture, when to create services, and how to integrate third-party modules and libraries. api – an Angular module with a service for calling a REST endpoint associated with a specific resource. After this is done we will implement a common pattern by separating our components between Container components and Presentational components. Before starting a new project it's highly recommended to make a similar list based on your previous experience, it will help to learn the lessons and to not redo the same errors again and again. Il est donc un "Container Component" qui délègue l'affichage à des "Presentational Components". The "Container and Presentational Components" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Before moving forward, I’d like to share a trick I’ve found to test if your If they get no input from the parent, they’ll display no data. Container components. - ngAarhus Meetup, May 2018. They generate the data, render and pass it to their child components. 2. Avoid triggering change detection explicitly usi… Hope this helps. I implemented the presentational/container components pattern, where - in this case - the app component is the container.The presentational components have just input and output properties, and adopt the On Push change detection strategy. Movin… Container components are concerned with how things work. Presentation components can notify their parent container component when something important happens (a click for instance) and that container component implements the appropriate task to get triggered (service call for instance). May contain both presentational and container component but does not have DOM and markup of their own. Like the name implies it displays the UI. Initially Google released several minor versions to address many issues, then instead of modifying the framework further, decided to build a Completely New framework from the scratch and named it as Angular. There are several excellent component libraries out there that you can use to build your own application, such as Angular Material, Clarity or Kendo UI to name a few.. In this course we are going to build an Angular app from scratch using Angular CLI. Dumb components are mere presentational and ui-level. Conclusion. Using Angular bindings, we can create components that are void of logic and its only purpose is to connect data from the parent component to its view and relay user events back up to its parent component. In a Redux-powered app, a presentational component does not interact with the Redux store. Actually, you should have more presentational components than stateful. Shared components. In his article Presentational and Container Components, Dan Abramov discusses separating presentational and container components in React. 10. Let’s create a products component in charge of displaying a list of products filtered by a search term: The two components are untyped and present a low-level general-purpose API. Presented at: - Internet Week Denmark 2018. The "Container and Presentational Components Demonstration" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. Container Component (ou Smart Component) Le composant app s'occupe donc de la "business logic" et sélectionne les objets book à afficher via la propriété bookList . By using the Model-View-Presenter pattern we can increase the separation of concern, maintainability, testability, and scalability in our complex Angular application with the use of container components, presentational components, and the presenters. Input and Output. End to End Angular Testing with Cypress. Besides having a better architecture and overview again our separation of concerns is fulfilled here as presentational components “only” take care about how things should be displayed and container components take care about the “work” like where the data gets from etc. Presentational and container components. Here's what you'd learn in this lesson: Lukas reviews code demonstration the container and presentational components. It separates presentational components from container components. Card, List, Table, etc…) that wrap the framework ui components. Model-View-Presenter with Angular. ... Angular … The presentational components become the "dumb" components mainly focused on displaying data. The Model-View-Presenter pattern increases separation of concerns, maintainability, testability and scalability in complex Angular apps by using container components, presentational components and presenters. - ngAarhus Meetup, May 2018. A container component acts as a Parent and the "Presentation component" is like a child component. Container components are responsible for fetching data, handling routes and passing data into the 'presentational components' We will add 2 routes to ProductRoutingModule, one to each of our new Container Components. Container components will manage and retrieve object/model states, whereas Presentation components are just present or render the state. Presentational components get their data from their parent. May contain both presentational and container components** inside but usually don’t have any DOM markup of their own except for some wrapping divs, and … Bad practices to avoid in Angular. Presented at: - Internet Week Denmark 2018. Multiple Before we continue with the main topic of this article — “how to write reusable Angular components”, let’s take a quick look at a great tool that actually lets you share and collaborate on individual reusable components. Angular Architecture: Container vs Presentational Components Pitfalls, Let's then talk a bit about Angular Component Architecture: We are going to present a very common component design and a potential design ng-container is an element that’s available in Angular 2+ and that can act as the host to structural directives. Of course, you might organize your components differently, but it at least gives us a base for discussion. features – a standard Angular feature module. Unit Testing of Presentational Components. The most stable component we can have is a component with no logic in it whatsoever. Container components are responsible for defining how things work, i.e., for fetching data and updating state. Pages. Bit helps you and your team develop, share and collaborate on individual components. If we mix up presentational components with container components then the opportunity to simply use a “dumb” component to render something as simple as … Components: stateful, stateless, dumb and smart. We are going use this pattern in our React shop to split the product page into container and presentational components. ng g c components/product-list --project=products. This worked right for Bootstrap and Angular Material because their components were isolated but with ionic, the component: needs to project an ionic component and our custom presentational components is rendering its host tag. Each component gets encapsulated with all its dependencies and setup and pushed into a private/public collection on Bit’s cloud … They are mainly composed of Presentational components, which they pass data to. You CAN have presentational components in angular. These are self-contained components, just like a real container. Let’s run a lean, mean Angular-powered machine. Angular was designed to promote code re-use and separation of concerns. In an Angular application we try to separate our components to container and presentational components as much as we can. import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; Container components that are loaded directly via routing (by either component or loadChildren) should be placed in the src/app/pages directory.. 2. Why?Enforces good practices such as immutability. I created my own presentational components (eg. In complex applications, FormGroup and FormControl, usually, are not the good abstraction to use in Angular components. If a component is used in multiple places, it should be extracted to the nearest common ancestor's components directory. In React, a presentational component is a component that just renders HTML. The presentational component is responsible for how things look. The design is presented in this blog post by Dan Abramov (@dan_abramov): Why?Improves performance. Pages. The container components are the "smart" components that do all the work to manage state, persisting data and navigating. Container components, presentational components and presenters are combined using the MVP (Model-View-Presenter) pattern. 17 - Router Store. Create Presentational Components for Displaying Data in an Angular CLI Project. are purely user interface and concerned with how things look. It doesn’t matter the framework or library you use in your Front-end, if it’s based on components (like Angular, React, Vue…) surely you’ve already come across these terms: stateless, stateful, dumb, smart, container, presentational. Angular Architecture - Smart Components vs Presentational Components…: Angular Architecture - Smart Components vs Presentational Components ... Container components. The basic principle around Redux is to store the whole state of your application in an object tree inside a single store. You can read more about container vs. representational components here The component's only function is presentational markup. Container components act as hosting component which know about the data and have dependencies to services to fetch or manipulate the data in any kind of way. Add material module to Products module. Presentational components don’t contain container components. Smart components are components which are container or app-level. In our initial Inject Services or the Store service if using State management. To clarify, you want to use a presentational ( or stateless ) component inside a stateful component? When you start building apps with UI frameworks like Angular and React, the very first thing that you will come face to face with is the concept of components. Using jQuery Plugin in Angular… Call flux actions and provides these as callbackss to the presentational component. I have tried searching all around and even tried looking for recommendations for React instead of Angular… Smart Components: Đôi khi được biết đến như là Application-level Components, Container Components hoặc Controller Components trong kiến trúc của Angular; Presentational Components: Đôi khi được gọi là Pure Components hoặc Dumb Components trong kiến trúc Angular AngularJS was a hugely successful JavaScript framework from Google, which started experiencing performance issues in several applications. As you probably know, Angular is all about building UI components. A common pattern that is recommended when using Redux with React is to divide your components into two types — Container Components and Presentational Components. Provide the data and behaviur to presentational or other container components. Container components have to do with with how things work. The design scenario that we will be talking about is the separation of components between Container Components vs Presentational Components. Philosophically, components can be divided into two types: Presentational (dumb) in charge of displaying the data which is passed down to them; should not make use of services; pass events up instead of doing complex things with them; use changeDetection: ChangeDetectionStrategy.OnPush in the @Component declaration; Container (smart) Such libraries provide common reusable components such as tabs, date pickers, collapsible menus, and much more. Controller Components. Application Structure The application should be structured according to the recommendations from the official Angular documentation (https://angular.io/docs). When creating a component, an important distinction to think about is whether the component should be a container or presentational component. Let’s design lean and efficient Angular components. Here’s how I think about presentational components: they receive state as input and emit HTML as output. Let me know if … Conclusion. Container and presentational components. Let’s look at how some of the components in the example applicationare organized. Testing is essential for long term maintainability. In this section we examine the router store library from NgRx. 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, so let's review it in more detail to see what the problem could be. We’ll examine the components that go into one area of the application, the list of images. The presentational component accepts props from a container component. Container components that are loaded directly via routing (by either component or loadChildren) should be placed in the src/app/pages directory.. They are dumb in that they can’t generate their own data; this is dependent on the parent. You can read about this issue in this article: Angular Architecture — Container vs Presentational Components … Asynchronous Angular Testing with fakeAsync and async. Because they are mostly data sources, they are often stateful. Sometimes, presentational components should work with services too, to avoid repetitive inputs and outputs in a larger component tree with deep nested components. Now we need to change our container component to use the new filter action, for that you will implement a presentational component for the filter section that has and input box for the search, the changes of that field will be piped to the output prop called search, this changes our container to look like: ####product-page.component.ts Add a new container component to the auth lib; ng g c containers/login -a=auth Add a new presentational component to the auth lib; ng g c components/login-form -a=auth You may decide not to make this a presentational component but it … Put your Angular 8 development skills to the test and see how well you know RxJS library, advanced routing techniques like lazy loading, guarding, or resolvers. How? The goals of this article are to define what stateful and stateless components are, otherwise known as smart and dumb - or container and presentational components. They are mainly composed of Presentational components, which they pass data to. Presentation Components: They are just dumb components which don't use application logic and are used only for delegation of work like date picker widget..etc Container Components: They are actual application logic containing components which passes data to other components and child components, which manipulates data, decides how the application behaves The three categories of components are called Pages, Containers, and Views. The container component will share data/state to the Presentation component using "Input" properties. Container components are also called smart components. Concept. components and containers is where you put your presentational and container components. Presentation components with stying and presentation, as the name suggests. Unit Testing of Angular Components. Container components generally: Pass data to Presentational components or react to events from them presentational components. The app that we are going to build is a simple product list and detail page. 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. We will be following the presentational container component pattern to categorise our components into two groups. Presentational components are like pure functions they produce an output based on the input given. Their execution affects no external state which makes them predictable and easy to optimize. The Model-View-Presenter pattern increases separation of concerns, maintainability, testability and scalability in complex Angular apps by using container components, presentational components and presenters. To start off, you'll install Angular CLI and set up a working environment, followed by learning to distinguish between the container and presentational components. If a component is used in multiple places, it should be extracted to the nearest common ancestor's components directory. Here's what you'd learn in this lesson: Lukas reviews code demonstration the container and presentational components. As they generate their data, they contain no presentational content, they merely pass the data to Presentational components, it is their job to know how to display the data. If a Container component has any presentational content, it is failing the SRP in SOLID, it has multiple concerns and should be extracted. Presentational components don’t contain container components. One way to design lean Angular components is to use container components, presentational components and presenters. When we are using Redux, every component should be of exactly one kind. We could further break this down into a few more components, but again they’d just be smaller presentational components. Smart container components are components that act as a “glue” which binds observable stores and other business logic with presentational components in a loosely coupled way. Related articles. The component's only function is presentational markup. Presentational/container components (or smart/dumb components) Our current app has just a single level component for each route that act as both a container and render our model for presentation. For the purposes of the article, we’ll be using Angular 2 Components to explain the stateful/stateless concepts. The "Container and Presentational Components Demonstration" Lesson is part of the full, Building Awesomer Apps with Angular course featured in this preview video. The component's only function is presentational markup. Container Components. Angular 2 was a complete change for Angular users — the programming language, the architecture, and the approach to data all changed. Of course I also like my application to use the router so that it is easy for the user to navigate the application, bookmark specific pages (or should I … In other words, container components fetch data from services and pass it down to their child presentation components through @Input() or data bindings.. Model-View-Presenter with Angular. This post is going to walkthrough things to be considered when making design decisions on an Angular SPA application. 1. Presentational components receive data via their properties and also have property event handlers so that their container can manage the user interactions. It may have services, state management, routing, container/smart components and dumb/presentational components. — Here is an example of making this distinction in an Angular app: Our original component does everything. There are also other names for this pattern: "Container and Presentational", "Advanced and Simple". This component displays a simple table of all the images in the collection. nested logic structures Do let Angular control change detection implicitly using @Inputs() reference changes, @Outputs() emitted events, and the asyncpipe. They are fondly called “Smart” components. Before we get started, let’s look at how we can break down this form into some component building blocks. August 04, 2017 • 4 minute read. 1. ... Angular smart (container) / dumb (presentational) component architecture, conditional logic, and propagating inputs. They provide the data and behavior to presentational or other container components. To … They generate the data, render and pass it to their child components. Dumb components are also known as presentation components. In React, a presentational component is a component that just renders HTML. Mainly concerned with how things work. One of the most important principle while designing component is that Components only control their own View… Inspect angular.json libs array allow us to use --project flag with libs to get cli scaffolding and code generation. Inherently tied to the application itself; It would be very hard to use this type of … Because they are mostly data sources, they are often stateful. Like many other people I also like to split my components into container (smart) components and presentational (dumb) components. This design-pattern makes our code easier to re-use, maintain, scale, optimize and test. They may have some container component or another dumb component inside them. Then each Container component has View components as children (Pages -> Containers -> Views). nx generate @nrwl/angular:component containers/login --project=auth. Provide the data and behaviur to presentational or other container components. A complex applicationis characterised by at least one of these traits: 1. The presentational component accepts props from a container component. Container and Presentational Components Sometimes it can be beneficial to breakout a component (s) into container components (concerned with how things work) and presentational components (concerned with how things look). They may contain presentational components. The most important components in Angular Forms are FormGroup and FormControl. Container components. The smart and dumb components pattern is a very commonly used practice. https://dev.to/this-is-angular/container-components-with-angular-4o05 These are self-contained components, just like a real container. Model-View-Presenter. https://dev.to/this-is-angular/presenters-with-angular-2l7l It may be composed of other features. May contain both presentational and container component but does not have DOM and markup of their own. Here we have gathered a list of bad practices to avoid when you are developing an Angular application. Add a new container component to the auth lib. Add a new presentational components for products. Container components have to do with with how things work. Container components interact with Servies or Store to get data. Call flux actions and provides these as callbackss to the presentational component. Consider two dumb components, A and B. Perform the business logic either via Services or Effects when using the Store. Container and Presentational Components. We'll see how doing so limits knowledge of our Redux store to container components as well as provides us with flexible and re-usable presentational components. Connecting Components with Reactive Forms. They may contain presentational components. Conclusion. Analysis and Design activities Decide on UI structure, if the new feature creates a module.Decide on components to be built by category of presentational or container components.Decide on redux state activities to be performedDecide on redux actions, reducers, effects. Add container and presentational components. In a Redux-powered app, a presentational component does not interact with the Redux store. Components can be categorized into dumb components and container components, depending on their roles. https://dev.to/this-is-angular/presentational-components-with-angular-3961 Angular Architecture - Container vs Presentational Components Common Design Pitfalls. Presentational and container components. Container Components. What we’re focusing on is how to structure a componentised form and how we can tie those into container components that control the data for each presentational component. Mainly concerned with how things work. https://dev.to/this-is-angular/testing-angular-container-components-33io Let’s minimise the logic in our components to a level that they are barely worth testing. Column headers are sortable, the row contains a link to view the image, and the expanding the “Tags” column header allows the user to select a subset of images to be d… 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 more and more in the Angular ecosystem since now Angular supports the Component model. The design is presented in this blog post by Dan Abramov (@dan_abramov): The newest edition Angular 11, released 11.11.2020. By using the Model-View-Presenter pattern we can increase the separation of concern, maintainability, testability, and scalability in our complex Angular application with the use of container components, presentational components, and the presenters. You'll explore advanced concepts such as making requests to a REST API from an Angular application, creating a web server using Node.js and Express, and adding dynamic metadata. Today Angular 2+ based on TypeScript is at version 9, and AngularJS continues to be used by many developers as a legacy framework. To give an overview, the Page Component has Container components as children. I like to call it pure and impure, I feel that it makes more sense when you take functional programming into consideration. Provides data and behavior to presentational components and other container components. ... Characteristics of Container and Presentational Components. Further break this down into a few more components, Dan Abramov ( @ )! By either component or another dumb component inside them it pure presentational and container components angular impure, I that. ( smart ) components called Pages, Containers, and propagating inputs separating presentational and container component but does interact... A simple table of all the work to manage state, persisting and... Component using `` input '' properties as much as we can have is a commonly... Architecture - smart components vs presentational components '' Pages - > Views ) components such as tabs date... If a component is responsible for defining how things look logic either via Services or the store: pass to. Des `` presentational components `` smart '' components that are loaded directly via routing ( by either component loadChildren... Own data and behavior to presentational or other container components vs presentational Components…: Angular -. Because they are often stateful initial do use the OnPush change detection strategy presentational container ''! They produce an output based on TypeScript is at version 9, and much more it have! Are connected to Services and know how to load their own data ; this is a component that just HTML. Feel that it makes more sense when you are developing an Angular app: our original does! Management, routing, container/smart components and presenters of your application in an Angular.... Data to > Containers - > Containers - > Views ) is not only for React, a component! Components become the `` smart '' components mainly focused on displaying data in Angular! Are presentational and container components angular which are container or app-level, render and pass it their! Break this down into a few more components, presentational components or React to events from them presentational become... Because they are mainly composed of presentational components and presentational components, presentational become... Untyped and present a low-level general-purpose API not interact with the Redux store container and presentational.. Was generated with Angular too or other View libraries Angular presentational and container components angular a simple product list and page! T generate their own data ; this is a very commonly used practice going to walkthrough things to used! And detail page code easier to re-use, maintain, scale, optimize and.... Container vs presentational components: stateful, stateless, dumb and smart list of bad practices to avoid when are... What you 'd learn in this lesson: Lukas reviews code demonstration the container components have to do with! Angular-Powered machine they receive state as input and emit HTML as output FormGroup. Input given the page component has container components 's components directory, conditional logic and! Purely user interface and concerned with how things look and collaborate on individual components presenters are combined using MVP... Redux is to use container components have to do with with how things work - smart components vs presentational and! A simple table of presentational and container components angular the images in the src/app/pages directory the data and to. And concerned with how things work, we ’ ll display no data that we will be talking about the... For discussion me know if … Redux is not only for React, a presentational component does have! Build an Angular app from scratch using Angular 2 components to explain the stateful/stateless.. You and your team develop, share and collaborate on individual components ) be. Low-Level general-purpose API which started experiencing performance issues in several applications state as input and emit HTML as.... Just be smaller presentational components purely user interface and concerned with how things look that go one! Complex applications, FormGroup and FormControl they generate the data and behavior to presentational or other components! D just be smaller presentational components for how things look CLI version 7.0 very used... Than stateful into a few more components, but it at least gives us base... / dumb ( presentational ) component Architecture, conditional logic, and propagating inputs them and! Depending on their roles about presentational components as children execution affects no state. For React, a presentational component AngularJS was a hugely successful JavaScript from. Is the separation of components between container components, presentational components that is now being used more and in. Presentational component is used in multiple places, it should be placed the. Pattern by separating our components into two groups `` smart '' components that do all the work manage! To presentational or other container components is all about building ui components presentational and container components angular properties sense when you take functional into! Every component should be placed in the collection with Servies or store to get data inherently to! And provides these as callbackss to the Presentation component using `` input '' properties these! The container components Redux-powered app, a presentational component accepts props from a container component but does not interact the. This Project was generated with Angular too or other View libraries have property event handlers that. Contain both presentational and container component but does not interact with Servies store. That it makes more sense when you take functional programming into consideration with logic! Further break this down into a few more components, just like a real container components! Produce an output based on TypeScript is at version 9, and more... People I also like to split my components into two container and presentational ( or )! Components: they receive state as input and emit HTML as output the product page into (. 'S what you 'd learn in this course we are going to build is a is. Loadchildren ) should be extracted to the auth lib des `` presentational components and presenters are combined using the (! Work to manage state, persisting data and behavior to presentational components as much as we can have a! 2+ based on the input given reviews code demonstration the container components input given hugely successful JavaScript from. Actions and provides these as callbackss to the presentational component is responsible for how. Logic either via Services or the store presentational and container components angular by Dan Abramov ( @ dan_abramov ) container. Container components are untyped and present a low-level general-purpose API individual components if Redux.: Lukas reviews code demonstration the container component to the presentational component does everything we are use! Page component has container components, Dan Abramov discusses separating presentational and container components presentational components and other container.! Are using Redux, every component should be of exactly one kind are container or.... Presentational '', `` Advanced and simple '' and markup of their data. By Dan Abramov ( @ dan_abramov ): container and presentational components '': //dev.to/this-is-angular/presenters-with-angular-2l7l components: they state! For the purposes of the article, we ’ ll examine the components do... Un `` container and presentational components, presentational components: stateful, stateless dumb. Routing ( by either component or loadChildren ) should be extracted to the nearest common 's. Structured according to the recommendations from the parent, they ’ d just be smaller presentational components making design on. Service if using state management, routing, container/smart components and presenters are combined the. Display no data many other people I also like to call it pure and impure I!, mean Angular-powered machine code re-use and separation of concerns maintain, scale, optimize and test child. You might organize your components differently, but it at least gives a! Share and collaborate on individual components exactly one kind object/model states, whereas Presentation components are responsible for things!... Angular smart ( container ) / dumb ( presentational ) component inside them things... Know, Angular is all about building ui components stateless, dumb and smart, date pickers, collapsible,! Using state management, routing, container/smart components and presentational components or store to get data an object inside. Continues to be considered when making design decisions on an Angular app using the.! Mainly composed of presentational components... container components are like pure functions they produce an output on. Angular Forms are FormGroup and FormControl, usually, are not the abstraction... Components interact with the Redux store presentational and container components angular about presentational components is responsible for how... Des `` presentational components call flux actions and provides these as callbackss to the Presentation component ``! The auth lib course we are going use this pattern in our React shop to split my into! This Project was generated with Angular too or other container components are responsible for how things work i.e.. Is used in multiple places, it should presentational and container components angular placed in the src/app/pages..... Just like a real container app using the MVP ( Model-View-Presenter ) pattern the.! Dumb and smart ; this is a component that just renders HTML component accepts props from a container.. About building ui components to load their own and your team develop, share and collaborate on individual components is... Defining how things look the name suggests tied to the presentational component external which. Making design decisions on an Angular app: our original component does not interact with the Redux store components.... `` input '' properties 2 components to explain the stateful/stateless concepts smart '' that. The container component but does not interact with the Redux store presentational:. To design lean and efficient Angular components add a new container component will share data/state to recommendations... With Travis CI to clarify, you might organize your components differently, but again they ’ d just smaller! Get data accepts props from a container component will share data/state to the presentational component does not with! Are purely user interface and concerned with how things work, i.e., for fetching data persist! Makes more sense when you are developing an Angular module with a specific resource let ’ s lean!