All language subtitles for 4. Custom slot

Hello, welcome back, then you're lecturer in the last lecture we have fixed our Model three was about

a component in this lecture will get again into the modular component topics because I forgot to explain

you about think.

So let's start go to your model component.

And I think I have forgot to explain you how you can pass custom components or custom elements into

your model component.

For example, here you can see the button to open the DS model.

Well, we will implement is call to make a deal, right, which would open the model.

But in our profile, we are calling it update info.

And that's a default button we are displaying in our model model.

Usable model in model, though the view here is update info button to open the model.

But maybe I would like to have this part of the re-usable so I can pass it from outside.

So a profile model, for example, like a puzzle or whatever button.

I want the display to open the model.

So how can I do it?

We have already learned that we can pass elements to the components you can see here we are passing

the form.

In the end, we are passing the form that's received in our model view as a slot here.

It will be rendered out here in the slot spot so we can do the same thing also with the multiple components,

and we can begin specifically to get the variable to render them out.

I'll show example go back to your profile model and let's say I would like to get here a different button

to open a model for us to create a template instead of your wrapping component in there.

It doesn't matter which is possible to create, it should be somewhere inside of the exchange model.

So I'll do it after the forum.

Let's see here.

See the inset inside of the exchange model.

I'll create a template just like this as you are creating normal templates template and I will provide

here and the name for this template, you will do it to the to the hash symbol, letter symbol and call

it as you want to activate or activate or better.

For example, activate the robot or just simply activate or which will which will be on your button

to open the model instead instead of this template or right here button.

All right, and this will be my button to open to open the model.

All right.

So but I will write your custom class.

OK, I'll of the same class and we have a model that we use to go to model the The View and this button

class copy.

Let's get it back here, and let's pass it to the class and we can do one small change.

I'll move this class on the new line and also this bracket.

And I will this will be a success, but its primary will be slightly different color, but the something,

it's a primary.

You can you can take these classes in a documentation.

Everything is explained there.

So this will be its primary, and the name of this will be, let's say, the liberal year.

This is a custom button, custom custom button.

And it's going to be also like.

Like, these are actually that's up to you, how you could decide, OK, let's leave it, let's leave

it for now, this way or just the clause on the same line, I think it's not that long.

All right.

So I mean, to the left at the right side, OK?

So I think that's a it's alright.

It's easier to right now.

OK, so now they are passing this custom button, but this is Bill being able to get passed into the

model will be not rendered out in a model deal because it'll specify here that we would like to displayed.

So now, whenever you want to display these activator template, you will go to your model and you will

find a spot variable like displayed, so we want to display it instead of this button here, right?

OK.

Instead of this button here.

So what you are going to do will create here another template like this, another template, and we'll

check here if this slot is getting passed because not for every component, the we need to pass the

custom open letter about them because sometimes we are happy with their custom button that be defined.

So in such a case as we can right here, if all right and we can verify here like this, you have access

to the object called the last time slots, and you can check for that the name of the template you have

provided in your profile model.

So if you are passing the slot activator here so they can check here every passing the slots activator,

then we can render out this template and we can displayed.

OK, so that we can write your slot as we had it before.

But in this case, this will be your default slot, but this will be the slot with the name.

What's your name like this?

And they are calling it activator.

OK, so now recapitulate the are passing our template, we are calling it activator, which will be

our custom button before getting past the model.

In an ideal check, if such as slots, slot exist, if it does, then at least play slot activator.

So we can say this activator lame and this name with the hash has to match.

Many will say it now.

We will go back to your browser for this play to battle a custom button and update info.

But of course, you want to display only one of them.

So what they mean to do?

If there's Vive, if there's no sports activities passed, then we don't need to display the button

here so we can drop these button and become bigger vessels directive.

OK, so if the activator is past bid on it, the default button, if it's this is not passed, then

we then we need to be done with this play this.

OK, so many of us said, now please save it.

Go back to your browser will save all this polling custom battle.

But of course, you cannot open a model because we don't have any click event on this custom button.

We will fix it shortly.

So somebody will this ad to product default button, you just need to do this.

You will go to profile model and it will simply remove the template and this will display the default

bottom.

OK, you can see the full button here, but if you will decide I want to have my custom button in my

model, I will just pass the template of the activator with a custom button.

All right, and here it is, not only to just handle how you will open, it will be pretty straightforward.

What I will do here.

All right, we'll go to to our model, very dear colleague, but this no vote may be able to forget

to show you.

OK, so we can click and collect the vote to do the same thing, right?

So they just want to open the model so this can stay is open equal to.

So let's say it like this go back to your browser.

And click it and you will see what it will not work because they cannot attach even to their slot.

So what we need to do instead.

We'll probably slot into the into the deep dive element like this, and we will provide the click on

this day.

To open it.

OK, so he's open will be here through.

OK, let's try it out now.

Maybe this will also not work or not display.

Let's see.

Let's refresh and actually I could say the already said so it should work.

Let me let me take a look.

OK.

Click here and you can see it Dvorak's as before.

No changes here.

OK, so now we have an option also to provide a custom button if you if you want.

OK, so that's it.

Let's continue in next year's.