This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Create Smart Components with Angular

    Fabian GosebrinkFabian Gosebrink

    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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss