Displaying Components in an Angular TodoMVC Application

Daniel Stern
A free video tutorial from Daniel Stern
The Code Whisperer
4.2 instructor rating • 17 courses • 119,908 students

Lecture description

In this clip, we use decorators, components and composition to display the contents of an array as a list within a dynamic, Angular 2 application.

Free Preview Note: This video picks up in the middle of a TodoMVC. So you can see the style, but trying to code along would be pointless, since the scaffold is missing! Sign up to get the full course!!

Learn more from the full course

Building a TodoMVC Application in Vue, React and Angular

One Course, One Course to Rule Them All

02:23:34 of on-demand video • Updated November 2017

  • Build an application in Angular@5.0.2
  • Build an application in React
  • Build an application in Vue
  • Differentiate between Vue, Angular and React apps
  • Scaffold Node applications for a variety of purposes
English [Auto] Welcome back. So here we are we've Scath folded our angular app that was the hard part almost. So now that it's here whenever we type whatever we do here when we update make any changes to this app it'll update just automatically on the right. Now we can make fast progress working with angular. So before we get started making components lets do something opposite it will start by injecting the data into angular angler's Trickey about how you can get the data into the application. And also this is going to seem really unfamiliar but once we get the sort of hooked up we'll be able to work with our state just as we expect so can you file and call it Sherdog TS typescript import actually work differently than E6 imports. So whereas U-6 import will tolerate a semicircular collection of imports where you're only importing one particular thing from say the index file types want to have the shared files where we have something that might be required by more than one thing. So will need injection tokin from angular core and we'll export a cost called state which will be equal to a new injection token and we'll give it a name of state. So this is all pretty bonkers. You know we're used to state being a representative Tejan of our object but in this case Theed is now a class. It's a it's a kind of thing you can inject into your app it's pretty crazy I know. So now inside app module will import state from shared and Myrrha. This isn't the actual state object. It's a injection token which lets angular know what we're what we're injecting. Basically in the original angler you would use a string. When you injected something to just call it in quote state and hope that angular doesn't confuse that with any other states down the line. Whereas in angular Tuina up 92 these injection tokens which are clearer but kind of unintuitive and wacky. So we'll add a provider's array which I'll have one object and we'll have it provide state. So this is it's link. We'll use it. Well inserted into our components by using the same state object and the well defined use value. And here's where will the final default States so say show done in as true to do. And let's write some to do. So that's looking good but what does it mean. Our app here seems unconcerned of the change we made. All right so here's what all gets really wacky and interesting. So now in our app component We'll also import state from share and we'll also bring in inject from angular core. Now what we'll do is in this app component class in angular the class is the div element. So here's we're going to put all the properties that our application will have right here as though they were class properties. We'll give it a private to do property and we and here we're going to write a bit of typescript was pretty crazy in typescript you put a colon after your variables and you tell typescript what type it's supposed to be. At this point we haven't written any type it is going to make that equal to an array of any. And he's my favorite type. And we'll have a private variable of show done which is a boolean and won't make it true. Now we'll have constructor so constructor is a special function that it runs at the beginning of your components lifecycle. And not just that but it can have a special argument. Called state and before state what will say is at. Inject and then pass in the state. So all we need to do in this constructor is well actually just Konsole info construct or file by state and then we make this dot do is equal to a state talk to do. And this not shown done equal to state of tacho does. Now if we run our app we can see that the constructor is called automatically at the beginning and the state as we've defined it is right here being passed to it. So we're getting the state using at inject and we're getting into the application now through composition we can pass components of the state to our various child components. So let's define a to do list we'll make a new folder SIRC called to do list and we'll make to do Dasch list component. So we'll start by importing component and input again. We'll make an add component decorator give it a selector of to do list. This is how we'll actually write it in our templates and a template file and was make as a string for to do list for now and then we'll export a default class call it to do list component. Now here's what we got. Interesting if we use an input and define any variable it will tell angular that this variable is to be inserted by a parent component. So we'll make to use an array of any and show done a boolean. Now we can go to our app component or sorry app template and we can just type just like that to do list. And we'll pass it to properties we right in square brackets to do. This means this refers to the inject argument and the string to reduce will refer to the to do property on this which we already define. Let's do the same for showdown and that's that. So what happens when we run it got a big old error can't bind to to dues and that isn't a known property of to do list. Well of course because we haven't even declared our To Do list yet. So we got to go to APT on module and when to import our to do list. Now when you declare it here in our declarations now knows what we mean when we say to do list and if we have a look at our application it's now working because we declared the To Do list in our module. Wow. So in the same folder to do list will define a To Do list item compounder we'll just call it to do component. So once again we'll import component input from angular core and we'll define our component decorator will make this selector to do. And I'll give it an inline template and we'll just say list item and we'll just take a text but what is text. If we exported a fourth class to do here we defined text as an import decorated argument which is a string. Which means it's going to come in from the parent. This is going to be cool. And while we're here also make another at input called done which is a Boolean equal to false. Now in our to do list let's update this. So instead of an H one is that an ordered list. A ul. And then here we'll put to do and we'll use the NGI for operators will say Star and G-4 equals and I say let t of to do. So in this context t will be equal to what to do. And we'll bind we'll inject the Text property of the square brackets and make that equal to T Dot text or to do with R-TX and done is equal to T. Done so we can say that 0. Now Eric can you guess what we forgot to do. Yep we got to declare our to do item in our main application so import to do item import to do to do component and we'll declare it here. So we're looking pretty good so far so it's making a to do component for each one of these list items. That's some cool stuff right there.