Blazor in 2020 - part 3 - Components

1. Introduction: hello and welcome to the third class in the Siri's off blazer in 2000 and 20 now, in this one, we will cover components, components or, as you probably know, is a crucial part off blazer. Any blazer project will have some component. Most likely now, in this case, will cover the basic sat up off components servi parameters for components. When also we'll get into custom events and custom binds for the components on. Along the way, I will give you some other useful tips and advice on those come bonus youth and the fat less your started. 2. Basics: Hello. And with Lex, you learn how to use a component. Now it will be in a very basic way for now, which is basically how to display it, how to create one and how to use barometers, how to pass fruit votes, barometer values in a component. Now, if we take a look at the store in a little example, what we have here is basically a cleaned up template. Then we have index dot reserve er main file, of course, which is a page. Okay. And then we have test component dot razor, which is a component now a component and a page. It's actually the same kind of a file. It's the same. Daughtry's a file. If you go Teoh se pages 40 right click on it, you can go to add you can go to new item right like that. And then we get this whole dialog and then you choose raise a component. So the same thing that goes for a page ghost for component is the same dot razor file. The only difference is that the component does not need a route, OK, does not need a round. It could have a route. It could A It could have a so for multi purpose use. Okay, but usually or components do not have routes. And this is be inside off. Test component dot Razor now, As you can see, we have a couple of parameters in the code section. We have parameters. You have already seen the parameters for pages. We have parameter, of course, very important. And we have public as usual and then we have get set. Now, one thing to note. You know, in this case, we have strengths. You could have any value you want for components. You can pass through any kind of dive that you want. It was double by Teoh. It could be some of your custom class. It really doesn't matter. It all goes for a C Sharp is new problem if it at all. And then we simply display to show it mattered does in fact work. Now, the way you declare the component, it's actually quite easy. Okay, so we have in the index operates as you can see, the component declared. Now the way you do that is so the way you would do if any html Ellemann tagger, you would do say a case of you. Open it up like that, then you close it. Okay? Close it like that. And then you put your barometers into place. Okay? There are a few more things, but it may take that you might have And we will take a look at those in the next lectures. But basically, you declare this and then for barometers, you passed through your values like that. Very easy to do. Very simple to do and very useful. Indeed. Now forget quickly to a browser you can see matter does indeed work. We have beram want us one prompt to test one as well, actually, but it really doesn't matter now that we will conclude this lecture. 3. Custom events: Hello In this lecture will take a look at the events for components. Now, this is very important because this is one of a very few ways to transfer data fruit from child element to the parent element. This is important once again, and it is actually quite easy to do. But you do have to follow a few rules and things. So now let's take a look at our little example. And in the solution Explorer. First of all, we have Ah, Bages, sir. Just the index page in than our test component, which is the component were working with right Onda. Then we have a test model, so I will show you what You can also return specific types of specific model specific class objects. A nor just a simple string on in it or an integer. Okay, so let's get into the test component first. Okay. Like that. And let's see what we have here. First of all, we have a couple of buttons. OK, we have a couple of buttons on click than we have. OK, we'll take a look at those later, but then we have in the code section, as you can see, the code section starts right here. We have a couple off barometers, But what? These are his own simple strings or interjects or doubles. These are event callbacks. Okay. Event callbacks which carry Carry right string. Or the 2nd 1 would carry test model. So we have event one, which, when executed when invoked, will carry through event one string a K string right event one Booker it will carry through a string and then event too. You'll have test model now. The way will access them is very similar to was generic ones on click on imp ERT on change . Okay, you'll get the arguments you see have it's done. But the way you invoke from a K. But will you invoke? Um, if you can see, this is just a simple parameter structure barometer public, then get set. Nothing assigned just like that. Okay, but we haven't a simple a simple task. Okay. Tossed method right here where we construct a new object. Our test model. Okay. Our test model we construct and then you see, to execute the event to invoke it, you need to dio event to say right given to you and then invoke a sink and in the parameters you provide. You provide that piece of data that you want to call back her. You want to pass through to the parent element. This is very important. Okay, this is where you provide it. Though it would be brilliant into jail. Whatever type you want to use, that is the way you provide it. And you invoke it. A sinker case or a synchronous was no. Invoca is only invoke a sink. So this is how we do that. And at this point, the event occurs right? Once it has invoked, it occurs on DA. For the 1st 1 we just be a simple, very simple execution, right? Hey, have a sink on. Click right. A sink, the weight. And then you invoke it, right? Hair in that on click stage, right? Just like that. Now, if we go to the end, exalt razor. The main page. As you can see, we have a page self right. And then we have ah couple of paragraphs. We have event one argument. A case of this is the string that will come from executing the event one from that event when we first event occurs and then event to you. We have a couple of arguments from our objects that we print that in a bit of a different way. We have it went to and then bowel one. And now, too, just like that. Okay, now, this is how you can get that data. Just like any normal event, you can either just do your method. Okay, so we have method for event. One method for went one like that. You see, we have arguments. String right? It dates in automatically. Don't have to declare any arguments. Ah, no parameters. No alarm Ders? No, nothing like that case. You just put that in and it executes. It takes in the arguments, and it assigns to be event argument one which has been displayed on top. Now, the second option is to do a bit of way. Elaborate broach. Okay, We have event to write hair, even to we have. And then you see, we have arguments, Auxerre like that again, just like a conventional event on click on change show on something else we have been too. Then we have our whole alarmed expression going on, right? We have August that we take in dogs and then we can do whatever we want with it. The in this case, we simply a sign off eggs so that that is the object might get sand for that in vocation through that event. And then it is so into event arguments went to arguments, okay, And then it is displayed just like that. If it is no, initially, it is no right. It doesn't get display it all. Once Somalia exists in that context that we get a display. Now we are actually already running it on the browns on the chrome. And I'm going to go into that. As you can see, this is the whole arrangement from event one. We see nothing from two. We see nothing. But if I execute for event one you see, I get my test string and then execute for we went to I get my two values test and 10. Now, I would suggest to play around with it. A bitter Chester. Get a grip on on that whole concept. But don't stay on it too long. It is quite easy to use. Just remember that this feature does indeed exist and you will be using it quite a lot. And with that, we will conclude with lecture 4. Custom binds: Hello. And with actual take a look at yet another way to bind the data from the child component to the parent component to pass it fruit from a charred component to the parent component to the parent page show, whatever it may be. Okay, so in this case, in the slow example, we have Ah, a couple of things. Additional things. That is the test component. And an second test components that we have a couple of test components, a k And then, of course, the main index dot raise a page. Now in the test component. If we look at that first, we just have a button click. OK, a botton click. And on the click, we actually invoke an event. Okay, so we have a custom event callback. Okay, Custom event. We call it Event one, and then we have string A K string is the thing that gets return for that now, it won't be a simple getting an argument from an event. It will be a bit more elaborate. Okay, Perhaps a bit easier, but cleaner to read and and use. But so much for theme. Think OK. And then we have ah, the actual value. Okay, We have value one, so it will bind from the parent. It will bind to the value one. Okay, when event one occurs, OK, so it also gets displayed. Inhabit. If we go to the index dot razor, we're going to that. We can see we have test component. Okay. And then right here in the Kurd, we have ah, value one. OK, we have Ali one which is displayed in the input. Okay, it's ah ah. It has a binding with the input as well, so we can enter it in hair and it will be changed in the component, but we change it through the component. It will also change in hand. Wherefore the input valuable changes well, a case of the way do that. As you can see, we have bind. And then we declare which barometer we bind to. And then what you need to declare is the event. The event on which it binds a case of mind you, In this case, we call it value one, and then the event is called event one. But there is an easier way, as you have for kind of got a glimpse off that right we have second test component and in it in it, we also need to invoke a sink off course. Right. And we display the value again in the component. We have string value one. But the difference here is that we have event Colback named value one changed a case of the variable. The string is value one. Now the Perama tive and Colback is value one changed. So this is kind of a keyword, like in an E p I, for example, you would have ah, controller, something controller dot CS and then the system. The whole arrangement knows that it is a controller file. Okay, so let's go into the index and see how it works. As you can see, we have another input. We bind that to value to value, to write hair. Okay, this is for display, and then you see second test component, we simply bind value one. We don't need to specify the event. Okay. We don't need to actually specify the event. We can simply bind value one just like that. Okay, so this is a bit of a clean a way to do that. And I would actually suggest if you are going with this binding approach instead of event called back. So we have a method or whatever it may be some kind of an action. I would suggest going revenge because it is a loft cleaner representation off a whole arrangement. You can see quite clearly what each beram me to does where the cold bag belongs to which property that came. Now we actually have it running, OK? And the browns in the chrome right hand. We have it running and you can see that we have execute ful event once or let's ah, Lizzie Cem test. Okay. Like that. You see, I released it. Glad So it bind it with ah, fat input A cave with the input and ah ah, the actual bearable of apparent bearable. Okay, now, if I execute mind service will invoke visible in the Oakley advancer. Click on that. You see, it changes hair and it changes. Right? That a case now the 2nd 1 we can do DST Wazir like plant. Okay, so it works quite perfectly as well. And if I change, not everything changes as well. So you see, it does work quite perfectly. It's a great thing to have Ah, it's a great thing to use. And again if you have some action, if you have some action once that bearable is passed through to the parent, you should probably stick with the events. But if you don't have any action, if you just need to assign a value, this is a lot better, A lot clean a way to do it, and with that we will conclude this lecture. 5. Component reference: Hello in this lecture will take a look at something called component reference or a reference or a raff. Now, basically, what not does it allows you to give a sofa reference almost ah, similar to an I. D and I D in certain other languages or interfaces for C shop and basically access stuff that is in the component all property so that are in that whole component arrangement. So for this example, we have in the pages four order right hair and exhort razor and then test component. That's it. That's all we have. That's what we need now in the actual component. Let's see what we have. I came. We have an input, okay? And then we have a string to display to display. Now this one, As you can see, it's private private string to display. Okay, nothing fancy. And then it is displayed the pestering, however it's public and we bind it to the input Okay, public, and we bind it to the input. We also have a public task method. We have a public task method which shakes in value to display string a K which is then assigned to display. I came now After that, we have status. You have changed this method basically rear enders something. When you kind of work in a different Fred, we will cover this more deeply in ah, one of the next. Off the lectures, we will color this whole thing quite in depth, actually. But this is what you need for this to work for now, right? And then if we go into index dot razor, you can see. But we have, ah, test component. And then we also have something old ref, the ref and then CMP. Now, CMP, as you can see, is basically a variable a simple variable Ah, best component off type desk components of at CMP. And that's reference, right? So basically CMP Province variable, which has made a reference you can access any public properties off that component. And this is what we do. We have a little test method which is by way, executed on this, but on the click off his bottom, right, And then we have to display to display mind you, this is a string again, a problem with string in the index dot raises its not the same as one in test component and then we have that test method which, as you can see, does a couple of things. It assigns the test string from the component you see from the component. It assigns the task string to display and therefore it will be displayed. Now it also executes with test method from the best component, and it gives a little word works. I came so it executes that that is this one, right? This one. So you see, you can access properties to be strings and, well, other type. You might have as well asked the method. So let's see how it works. We're running it on chrome right away. Okay. And so you see, this is our program that say I will input something best now execute Or rather, first of all, I can mind over, Let's execute you See, now it says works and it was able to assign it. We have test so again, basically what it allows you to do that references, access all the pieces off the component as your would with any normal class. And before that said we will conclude this