Angular 2 - Building a Toggle Button Component

[00:00] To create a toggle component, let's create a new typescript file. We'll put it in a components directory and call it toggle button. Then we'll need to import from Angular core the component decorator. Use the component decorator with selector of toggle button with a template of I'm a toggle button. Then just export this as a class called toggle button.

[00:37] Now we can switch over to our app and import that toggle button from components, toggle button, and we'll import toggle button. Then we make sure to include in directives the toggle button. Then just drop that selector into our template. Want to hit save. You'll see this refresh and we'll get I'm a toggle button because that's what's in this template right here.

[01:06] Let's change the template to be an actual button, let's say button. We'll say click me. Hit save. Now this will change over to a button when it refreshes. Now we have a button that says click me, but what I want to do is pull this content out or actually have it pushed in from the app.

[01:29] I'm going to use something NG content. In my app, if I put something in here, I'll say please click. I hit save now, this content will be basically transported into here. Now we have a button with the label please click inside of it.

[01:49] To make this a toggle button, let's give it two styles. Styles is just an array of strings for each of the styles you want to create. I'll say on is a style where the background color is white and the font color can be black. Then an off where the background color, we'll just copy and paste this, background color will be black and the font color will be white.

[02:21] If I give this a class of on, hit save, you'll see that we'll have our white with black text. If I give it off, you'll see that we'll have our black with white text.

[02:34] To track this value, let's set up an on. We'll start defaults. Now this will be based on this value right here. If I log this out... and I'm just saying log this out inside of the template by saying on and then parsing it as JSON. You can see this is false.

[02:56] We can just track that visually. Now instead of class, I want to use NG class. I'm just going to evaluate on. If it's on, then we want to assign on. Otherwise, give it off. These are both going to be strings that are mapped to those values up here. You'll see it starts as false. This is false now here. If I turn this to true, now this will map to the white one which is on.

[03:26] When we click this button, we want it to turn from on to off. We'll set up a click handler. Say on click, pass in the event just in case we need it later on for whatever reason, and we'll say on click this.on. Then assign that to the opposite of this.on, basically flipping the value. Now when we click on this, you'll see it will change, false, true, false, true, which using NG class is flipping these styles as well.

[03:55] Another thing we'll want to do is set this default value from outside of the component, meaning that we want in our app to be able to say if this is on our not. If we wanted on to be true, we need to set this on as an input so we can pass that value in. Don't forget to import input. Now instead of starting as true, we can say please start as false. When I save, it refreshes. It starts as false. When I click, it turns true.

[04:27] Then finally with the toggle button usually what you're doing is tracking the state of the toggle button from outside of it. You don't really care that the visual state of the toggle button is changing. You care what the toggle button can turn on and off outside of the toggle button, so we want to push this on value out.

[04:42] What we can do is set up a simple basic two way binding with this where we have an input of on and an output of on change. This will be a new event emitter. We'll make sure to import both of these, output an event emitter. Now we can actually set up the two way binding on this by wrapping the on in an event as well as having the brackets so you can push values in, so values in and values out.

[05:10] This false value is something that we can set inside of our app. We'll just say state is false. Now we'll track state. With the state set to false and pushed in, you can see now this defaults to false. We can click it true and false, which means that now we can log out the state. That's this state inside of the app, not the state inside of the toggle button.

[05:34] Now it's pushing this value out. Now when we click, you can see that the state is changing inside of the app, but we haven't set it up to change outside of the app yet. That's because in our toggle button we need to say on click we need to emit the event change.

[05:48] We say this on change emit. We want to emit the value of this.on. Now when I save and I start clicking, you can see that these two are in sync. This is the internal value of the button. This is the external value inside of the app right here. Which means that something I can do now is move that state inside of the actual label of the toggle button and say if the state is on then show the message of on or if it's off, show the message of off.

[06:25] This is true and this is false based on this. Now when I save, you can see we start as off. This was false. I'll click, click, click, click, and you see we're turning it on and off. If we set this to true, hit save, you'll see it's true on, off, on, off, on, off. I'll come in. I'll delete my rendering out inside of the template, just format a couple lines here to clean it up a bit.

[06:54] You can see that we have a working toggle button that right now defaults to on, off, on, off. If I want to start this as off, I'd say false, so now it's off, on, off. It's keeping track of the state inside of the toggle button and then dispatching the state out from inside the toggle button as well.

[07:12] Then just one last thing to prove this. We could do something like a header, say NG if state, and just do a simple hello. I'll hit save. You can see this is off now. When I click on, it'll show it. Off, it disappears and is removed. On and will show it...