This helps us keep our child component the same, but bind to a different named property. Here’s a StackBlitz example of what we’ve done so far:īefore you leave there’s one more thing to show you - custom property names. The decorator then tells Angular to create a property binding to the item property that we bound to using square brackets, which lets us reference item in the component and any properties such as name and price.Īs our parent container component is in charge of rendering our child presentational component, the data is already available to us - so we don’t need any Observable references or constructor logic - we can simply use it to render out based on the data passed into the component. Let’s begin with a simple smart container component that receives a list of menu items and renders them: Smart components are aware of things outside of the Angular component tree, whereas dumb components are not. Once that data is available it’s time to delegate the rendering, and behavior, down to a dumb component (or presentational component). A container component is smart because it has awareness outside of the Angular component tree - for example it retrieves data from a Service. ✨ This introduces the concept of a smart, or “container” component. No components are created equal, there are parent and child components…Ī parent component is likely responsible for retrieving data and passing it to the correct components for rendering and user interaction. Angular is built upon property binding, so learning this is essential. In this tutorial you’ll learn how to pass data into an Angular component using the decorator and custom property binding. Angular components are the building blocks of applications, and component communication via one-way data flow is the key to writing clean Angular applications.
0 kommentar(er)
