Pick Up Angular 2 in 6 Minutes

[00:00] Setting up Angular 2 typically involves three files. This one is just a main file where we bootstrap based on our platform which is the browser. Then in our module file, we're going to import and use the browser module because that's where the browser functionality is.

[00:16] Then in our app component, this is where we start writing our templates and template logic. If I change "Hello world!" to something else, hit save, you'll see it updates over here. You'll see something else. This is all put together because this selector here matches in our index HTML. It matches this app element, and we're bootstrapping against that.

[00:37] Then finally in our package JSON, you can see we're just running a server script with is using a Webpack, which you'll either use using the Angular CLI or through an Angular seed project. I'm just using the bare minimum one for teaching this right now.

[00:51] Back into our app component, if I want to move something in my template like this and make it dynamic like message, I can say, "Message is amazing." Now when I hit save, you'll see something amazing over here.

[01:06] With that set up, I'm just going to make a div to wrap around all this stuff and then create an input. Then to set the value of this input, you might think you could just set it to that message like so, but if you look in the browser, you'll see that it's actually setting it to the string of message.

[01:22] What you do with this where in Angular 1, you might think to put message inside of curly braces, in Angular 2, you wrap the attribute in the square brackets which is telling the value that you should evaluate this as a reference to something on the class. Now, when I save, the value of my text field is "amazing."

[01:43] The next thing you want to try is because you're familiar with NG model from Angular 1, so you'd think I'll just put NG model in there and that'll evaluate this message. I'll hit save. Then this is actually going to break because in my module, I need to import the forms module. That's off of the Angular forms package.

[02:03] Then that, when I hit save, will give me the NG model so I can use it to construct forms. You can see we're back to where we were. Now, in my app TS, you may think you can just do the curly braces like message here like we did before and that because I have NG model set up that when I type in here that it would change this.

[02:23] The square brackets are only saying, "Set this message to the NG model." It's not saying set the values from the NG model or the values from the input to the message. That syntax comes from this event syntax, the parens.

[02:38] If I say something like, "Click on click," and then set on click so that this message is new message. I'll hit save. As soon as I click in here, you can see that both of these changed because I changed the message. When I change this, it's not saying, "Hey, push out the values of this into the message."

[02:58] This actually uses the same syntax and paradigm as these parens where you just put the parens around NG model. Now when I hit save, I come in here and click, changes it to new message. Then I can just delete these and it updates.

[03:14] Now, you can make it so that instead of clicking we'll say, "Key up.enter," and we'll change this to, "On enter and on enter." We're going to keep track of some messages. We'll just create an array. Every time we hit enter, I'll say this message is push this.message. Then I'll reset the message to an empty string.

[03:35] Then we'll just log out all the message. Put a little separator in here. We'll say messages. I'll use the JSON pipe just for debugging to display it. I'll hit save, and I'll come in here and type one enter, two enter, three enter, four enter. You can see it's logging out this array.

[03:54] Instead of just debugging this, we can create an unordered list with some list elements in it. We're going to create one element per message. I'm going to use the NG 4 syntax here. Whenever you see this asterisk, it means that it's using this element as a template to create elements.

[04:14] Obviously, this list element is going to be used to create a message for each message in that messages array. The syntax in here is, "Let M of messages," and then we can just display M. I'll hit save. Now, you'll see one enter, two enter, three enter, four enter.

[04:33] Finally, let's make a line through every time I click on one of these elements. I'm clicking on them now. Nothing's happening. I'm going to create styles which I can do inline. This is an array of strings. I'm going to create a completed style. The only thing in this class is just going to be text decoration line through.

[04:53] To apply this, instead of just pushing this string into this message as array, let's go ahead and push an object where the message is this.message and completed is faults. Now instead of displaying M, we need to display M.message. You'll see this will have the same behavior where I can type one, two, three.

[05:18] Then on this list element now, I can say, "NG class is equal to this object syntax of use the completed if M.completed." We've already looked at, the square bracket says evaluate this right hand side. This right hand side is an object where the key is completed. This matches the style name we declared this class up above.

[05:45] The value of it is going to be true or false of this M.completed. To toggle that to true or false we can say, "Click M.completed is equal to the opposite of M.completed to just toggle that value." I'll hit save. Now I'll add one, two, three, and I'll click one, two, and three.