This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Sidebar Toggle" Lesson
[00:00:00]
>> Speaker 1: If we go into app.component.html, notice here on the sidenav-
>> Speaker 1: We have a sidenav local template reference. And then what we can do is if we go up here, we have this button so if we look at the app, it's this button right here. This is what when we click this we want to toggle this.
[00:00:31] And so capture the click.
>> Speaker 1: And then from here sidenav,
>> Speaker 1: Toggle.
>> Speaker 1: Let me just do that one more time cuz I think its tooling is starting to increase in its capabilities and its ability to introspect code. I start typing and IntelliSense is able to pick it up and say, here is these additional methods.
[00:01:08] And so this is sidenav.toggle. If we go here, let's save this.
>> Speaker 1: And so, we just took two things and we just put them together. So we had a click that when we clicked in this case because this is an Angular material component that is exposing this toggle method as you saw in IntelliSense.
[00:01:34] That we're saying, when we click this we want to call sidenav.toggle.
>> Speaker 2: So that toggle method is built into the material component, is what you're saying?
>> Speaker 1: Yep.
>> Speaker 2: Okay.
>> Speaker 1: I'll show you one other thing that I think is really handy. That when I'm working with code, I'm like, what does this thing do?
[00:01:55] A lot of times, I'll just Command + click on that. And it would take TypeScript definition, and you can start to kind of poke around. And so MatSidenav extends MatDrawer, and I feel like if I kept going down this rabbit hole, eventually, I'd find like a toggle method in here.
[00:02:20] There we go. And so just to summarize that point is that if you're in something and like what does this do, or what is available to me? TypeScript definitions you can click in, you can step and you can see. So it's really, really handy obviously I'm dealing with any kind of part of Angular or Ngrx or even components, you can step in, you can start to kind of introspect yourself and start to make sense of what this thing does.
[00:02:49]
>> Speaker 1: Let's talk of just a few more things. So we have a title here
>> Speaker 1: And this is an app.component.html. So if I go into just the regular app.component.ts. Notice here that we have the title. It's dashboard. I'm gonna change this to Angular Core Workshop. There we go.
[00:03:15] So you can imagine if we go back here. Now, Angular Core Workshop. So far so good.