Angular Core

Angular Core Unselecting an Element


This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Angular Core course:
The "Unselecting an Element" Lesson is part of the full, Angular Core course featured in this preview video. Here's what you'd learn in this lesson:

Lukas adds functionality into the application by allowing the user to unselect an element.

Get Unlimited Access Now

Transcript from the "Unselecting an Element" Lesson

>> Lukas Ruebbelke: So let's think about what we're building here. So we can select a project. But we can't unselect a project. So what if you're like, I don't really wanna do anything with this yet. Well think about what will you do. Capture the click and we would set select the project to no.

[00:00:22] If I were thinking about this, click, we'll just go cancel.
>> Lukas Ruebbelke: Notice it's not super happy so we'll hop over here.
>> Lukas Ruebbelke: I'm actually super surprised that worked, considering that crazy parameter soup. So we'll go cancel,
>> Lukas Ruebbelke: And then what I could do is I could just say this selectProject equals null.

[00:00:59] But if you're going to mutate state I think it's good to do it in a single place. So what I'm then going to do instead of just manually this, I'm going to defer this back to, select project. So this is strictly a preference for me, but as I'm trying to, it's a mutating state in adjusting properties even presentation properties, is that I try to isolate those into a single place.

>> Lukas Ruebbelke: Yes?
>> Speaker 2: Maybe a simple thing. But first of all, I think you're calling the selectProject function, not selectedProject. And you're,
>> Lukas Ruebbelke: Thank you. PEAR programming for the win. Air five, okay.
>> Speaker 2: Second, I'm wondering why you didn't just call selectProject and pass it a null? Maybe would that give an error or something I'm just not seeing?

>> Lukas Ruebbelke: From here?
>> Speaker 2: Yeah just make it simple.
>> Lukas Ruebbelke: So you could, and that's a good question. It's like why didn't I just call select project directly? So back to personal preference is that I like code to be descriptive. In terms of when I call this what's going to happen.

[00:02:02] Well you're going to cancel something, what this also does is it sets the stage for possibly I need to do additional things. And so typically if I basically couple that action to a single thing, then I typically cannot extend it beyond that. And so therefore when I click the cancel button, I know hey, a cancel method is being called and so makes sense but if I said click cancel and also just order pizza or whatever.

[00:02:29] There's a disconnect there, so I like to reduce friction by when I click this, this event that I'm calling matches up to the action and the context of where I'm at. More importantly, I said it allows for additional sequencing. That maybe I want to cancel this but maybe I need to navigate somewhere else or something like that.

[00:02:49] Very good question. Let's see if I blow this up, isTrusted is true, wait hold on.
>> Lukas Ruebbelke: Yeah [LAUGH], that's why that was actually working. I'm like, this just doesn't make any sense. There we go. All right, so we've updated this. Let's go back, there we go.

[00:03:11] And if I go to Cancel, we're at a Null. But again, not super duper helpful. I think we can do better.