Sharing Top Content from the Angular-sphere.

From component to @component in Angular — Recurship

From component to @component in Angular

  • We have the container components and they are stateless components because none of them are taking any data.
  • In such case, the input is a function itself.
  • Inside that function, we can mutate the data or whatever the function is actually doing.
  • Once, it is ready, we can use a return statement and just return data from the function.
  • In the below code, NG changes before it is mounted and it will sync the data and the bindings.

This article includes component architecture, stateful / stateless
components, one-way dataflow, lifecycle hooks. Learn Angular component
concepts, communicating to AngularJS 2 components, the input and output in
AngularJS and 2, difference in the code of AngularJS and 2, stateless and
Stateful components and much more. 

Inside this chat element, we have a base element and we create a component, generate a selector and add a template URL. Now the life cycle hook actually tie into particular phases of the component life cycle. The component manages all the data for the specific roles even if we have different components which are being driven from the container.

When something is stateful, it is actually storing information in the component’s state which is a central point. It has the ability to be updated. In a stateless component, the internal state is calculated, but never directly mutates. For this purpose, a complete referential transparency is required to produce the same output. The stateful components are the one that manage child components. Following is the template for the stateful components.

The classes in the below code are stateless as they don’t fetch state and data, but we pass data in it and they are updated. There are three elements in the chat filter which allow us to change the stateless. We also have the chat list. For the stateful component, it has the data and passes it down. Inside the chat list, we have an input and an output. The input is the data and the output is the manipulated data or something we want to tell the parent. In the below code, chats is an input and select is an output.

We can expect an event object back which will pass it back…

From component to @component in Angular — Recurship