Create Smart Components with Angular
In this lesson you will learn the basics to create smart and presentational components. Smart and presentation components are a basic design concept of angular applications and will help you to implement your application in a structured and maintainable way.
Learn how to create presentational components in the next lesson Refactor an Angular Smart Component to use a Presentational Component
Instructor: [00:00] We are starting with a fresh Angular CLI project, and all I prepared for you is a dummy data service, which has a method called getData, which returns an observable of a string array, which returns an array of those three names.
[00:14] The next thing we want to do is creating a smart component which displays those names on the screen. For this, we can open up a terminal, and we can type ng generate component smart, which creates a new component for us.
[00:31] Then, we can head over to that new component, and we can inject the dummy data service in the constructor, dummy-data-service, and in the ng on init, we can call this.dataservice.getData.
[00:49] We can subscribe to that method. We can take the result as a parameter, which is of the type string array. Then, we will introduce a new property called data, which is also of the type string array. Inside the subscribe, we can say this.data=result.
[01:12] If we now head over to the template of that smart component, we can do an ordered list and do some list items, tag it with the ng for directive, and say let item of data. We can bind to that newly-introduced variable item.
[01:31] Last but not list, we have to go to our app component HTML, and we have to use that new smart component. If we save all that, you can see on the right-hand side, the names Phil, Mike, and Peter are rendered on the screen.
[01:47] Here, we build up a smart component, because it knows where to get the data from, it gets injected the dummy data service, and displays the data in our template.