Dynamic Values in Components

[00:00:00]
>> Displaying dynamic values in components, let's talk about that because that is a core part. Because right now we have static data, we can have whatever we just want to write, but we can do better. Let's take our component, let's say this is app.component.html, okay? This is not the best user experience.

[00:00:17]
What if you signed into your banking app and it was like, welcome user. You're like, this is a scam. This is not a real baking app. This is fraud. Okay, what you probably want to do is change that. You want to go from user to something actually like real there.

[00:00:29]
Okay, here's how you do it. In our component class, you get to define class properties, okay? So now we got a userName = codingChamp. That's the username. Now, here's a super interesting. You remember I said that, wait, can you tell me what components are written in? What language do we use?

[00:00:51]
>> TypeScript.
>> TypeScript, but we don't see any types here. Why is that? Why don't we see any types So this is a nice feature of TypeScript. TypeScript is really smart. Microsoft team. Shout out to you for this. Wow, that's for you. Okay, this is able to infer that coding chat is a string, so I don't have to explicitly put the type.

[00:01:20]
So type inference, and TypeScript is really natural and very, very good, right? It can infer every single type of course, but especially things like primitives, it'll know, right? And if your type signatures are set up properly from functions that return things, it'll be able to do type inference and know what type it's so you don't have to write the type there.

[00:01:40]
But I could write the type there. I could do that if I wanted to, okay? So now, we have our property, userName. But we want to go back into our template. How do we link the userName to our template? Well, here's how you do that, all right? So how do we make it work?

[00:01:57]
Well, first you use double curly braces, right, the double curlies. That's what we call string interpolation, okay? So in your template, you use double curlys. I think in Reacts, its only single curlies, right? Is that right? Yeah, okay, so gotta be different, why not? All right, so we use double curlies here, okay.

[00:02:20]
And then, inside the double curlies, what can go there? What are the valid values? Expressions are the valid values, right? So it can be a string is a valid value there, right? Because it evaluates just being a string. Or you could put like a calculation. If you did like 1 + 1, the expression results into something that can go there, okay?

[00:02:39]
So now with our interpolation, we can put our userName with a userName links back to our component, okay? Guess what though? Let's get involved. Let's get involved. One thing I wanted to show you, it's better for you to do it. Let's go to O2- displaying -dynamic -data. Friends at home 02 displaying dynamic data in our projects.

[00:03:05]
All right, so we're done with this. Lemme teach you something real quick that's gonna help you. If you go back, your application is still running, go ahead and stop it with Ctrl C. That'll just save you some heartache later. Cuz you're like, what happened to my application? It's usually because you have one still running.

[00:03:21]
So go ahead and stop the application right there. So we're going to our second project. And then let's see what the tasks are for this project, okay? Okay, great. So we're gonna do some more with just template syntax and interpolation. So here's what we gotta do. So an app.component.ts, we gotta update the template property to use interpolation.

[00:03:46]
Interpolation is those double curly braces, right? To display the real values from the item property defined in the component class, okay? So let's check out our component class, because all the hints are there for us it looks like. So let's check it out. So we're going to source, app, app.component.ts.

[00:04:07]
Look at those hints. I left some hints for you. All right, so those are the locations of the things. Now I want you to make the changes. All right, so there's some styles in here, just so you can see that we have styles. And if you want, you can actually run this just to see what it looks like which sometimes I'll do that too.

[00:04:30]
So I'll just start this up just so I can see what we're working with what it looks like right now. So I do 02-displaying, -Dynamic, all right? So we go back. All right, so here's what we have. It's like a little pop-up that you can get. Hey, order now for this bonus offer, because you've been such a great, part of the community, part of our shopping community.

[00:04:59]
So let's make session has some values, what questions can I answer? Any questions that I can answer right now, it's a great time for questions. Sure.
>> Folks, were asking, what's the specificity story around the styles and the component. Are they added to a different layer or are they always going to override global styles to the component?

[00:05:20]
Or are they just global styles that if you already have a really specific style in your global will it override the component?
>> That's a great question. What's the specificity story? Specificity story, yes. That one I'm not sure about. I have never tried to override a highly specific values.

[00:05:42]
Let's say to put a component in the global style for something, right? That's like as specific as you can get, right, down to the name well, and then try to override it, so I don't know what the conflict areas. But we can try it, we can actually try to during the time today.

[00:05:56]
I'm taking notes to try that example. So stick around because we will take some time to answer some of the more complex questions that I don't know out of my head. We'll try, I'm taking notes. I'm going to call that exercise be specific. Get it, no? Okay, I'll see myself out.

[00:06:12]
Let's jump back in together and solve this together. All right, so first thing for item price, what's the first thing I need to change here. Tell me the first thing I should do.
>> Get rid of the dollar sign and the comma.
>> Why do you get rid of the dollar sign?

[00:06:30]
>> Because you don't need it.
>> What's the dollar amount though? Didn't that work for you? What's the dollar sign? Okay, it's a trick.
>> I was gonna say, double curly braces, right?
>> Yeah, double curly braces, yeah, that's first thing I want. Yeah, it's okay. I think that enough people have taught in the world where they try to trick the learner that this little trepidation at first like wait, what is he really asking?

[00:07:01]
I usually ask what I really mean. Like, I'm never trying to trick you. Okay, I promise you, yeah.
>> I think some people might have gotten hung up on the dollar sign with the interpolation of the.
>> Yeah, so I found this out that this was an issue.

[00:07:15]
If you don't put a space between them, it'll do some weird angle stuff. Here's another thing you can do. You can do I think it's called Add dollar. Yeah, so you can do that as well. Yeah, I didn't know about the space until when I was reviewing it, I was like, I need a space there.

[00:07:31]
So it's a little weird. I apologize anybody get hung up on that one. That is one thing I did not mean for it to happen. So we got a price in there. Price looks good. This bonus offers only $30. You got to jump on this. Now, let's jump into the next thing.

[00:07:44]
What do I type here?
>> Curly braces item.name.
>> Perfect, double curly braces, we do item, or that was not item, item.name. But you see how it was giving me IntelliSense in the template? That's where the Angular language services comes into play, right? Is it can know in a string that we're doing Angular code, okay?

[00:08:06]
And then here's another value there. Then I can also do things like, I'm holding down the command key on my keyboard. And then I can like Command click and go right down to what that property is defined. So the angular language service really changed your life developer experience there.

[00:08:19]
All right, and then let's get to our description. And let's see how we're doing here and we'll do. Item.description, okay? Fantastic friends. And like I said, for this dollar sign thing, that wasn't meant to be like a trick here. So if you do it like that, you get some errors and then it just doesn't work.

[00:08:40]
I have to ask one of our compiler engineers, why is that a thing? Because this must mean something else that I'm just not aware of what it means, where it's giving you an error. Where if you do a space, it figures it out. And I thought it might be JavaScript related, like if you're do a template string.

[00:08:59]
It's a template string. So the backtick, come on, Mark. I promised I have a job, okay? Listen, this is what happened. This is the problem with this. And this is a good learning moment for everybody, right? The backtick makes it a, what's that one called?
>> A template string.

[00:09:16]
>> A template string. When you do a dollar sign, so this isn't an angular thing. This is a JavaScript or a TypeScript thing. It thinks you're trying to do replacement in a string template. So that's why it's freaking out. Man, Mark, come on. Let's go. Look at us learning together, I like that energy.

[00:09:34]
So then if you just change the $, you can do that. That's why that works, okay? No mysteries, no magic. Yeah, and then if we go back, here's our product, we got our values interpolated there and everything's feeling good. What questions can I answer about this before we go on?

[00:09:51]
And to be super specific, why do I use back ticks instead of just single quotes if that's a possibility that we can get that weird behavior? Because with the template strings, you can do multi-lines, right? And so that lets you just kind of format it nicely. If I do a single or double quote, then I'll have to concatenate each line.

[00:10:08]
And that just gets a little cumbersome and not a good experience. Yeah, man, look at that. Look at that, okay?
>> Similar to the questions earlier about the styles, we've got local data here, right, the item is scoped to this particular component. I assume that there might be data that's available at the application level.

[00:10:28]
>> Sure.
>> We're in a broader template, and our component can access that data as well.
>> So the communication between data and the local component, right? And then other parts of application. We will get to that. There's a whole section dedicated to that which we will get to.

[00:10:45]
Good question.