Create Smart Components with Angular

Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 6 years ago

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.

egghead
egghead
~ 38 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today