Passing data into Angular components with | Angular Component, Input
Inacomponent-drivenapplicationarchitecturewetypicallyusestatefulandstateless[1]components.Thekeyconceptishavingsomeformof“stateful”componentthatdelegatesdataandperhapstasks(intheformofevents)intoa“stateless”child,orchildren,component.Inthisarticle,we’regoingtoexplorehowtopassdataintoanAngularcomponentandunderstandthebasisofcomponentarchitecture.TopassdataintoanAngularcomponent,weneedtobeawareofaconceptcalledpropertybinding,whichwelearnedaboutinthepreviousarticle[2]whenweboundtoan
In a component-driven application architecture we typically use stateful and stateless[1] components. The key concept is having some form of “stateful” component that delegates data and perhaps tasks (in the form of events) into a “stateless” child, or children, component. In this article, we’re going to explore how to pass data into an Angular component and understand the basis of component architecture.
To pass data into an Angular component, we need to be aware of a concept called property binding, which we learned about in the previous article[2] when we bound to an <input> element to display a count.
The first step to passing data into an Angular component is to create a custom property to bind to. This is done via “input” binding to pass data from one component to another (typically parent to child). This custom input binding is created via the @Input() decorator! Let’s explore.
Follow along with the series:
Bootstrapping your first Angular app[...