All language subtitles for 16. Host Element Selectors3

Well our application is just about complete.

But if we go back and look at our original mockup notice how the mockup shows all of our different cards

spanning from left to right inside of our application.

They're going vertically in this video I just want to add in a little bit of custom CSX to make sure

that these cards span left to right now in order to do this you can have to understand a little bit

more about how angular handles CSX in particular we need to understand.

One real small corner case that you really need to be aware of.

To help you understand how to style the stuff going to first just show you directly what CSX rule we're

going to apply to which element inside the browser.

Once we understand what role we're going to apply and which element we're going to apply it to.

Well then go back over to our Ed and we'll figure out how to essentially translate the CSX into the

angular world.

OK.

So I got it right click anywhere on the screen and hit inspect all then pull up my element inspector

and then inside of here if we look at our H html structure we'll see that we've got the body inside

there is our app dash root element the abduction element remember that represents our app components.

We refer to this as our host component or submit our host element or the app components though in other

words when our angular builds out our entire application and renders it on the screen it's going to

find that app root element it's going to look up the app component it's gonna create a new instance

of this class.

It's going to take its accompanying template that's going to take everything inside of here and throw

it into that host elements.

And so inside of app root if we expand that we'll see five copies of the app cars and use it for copies.

Yeah we've only got four copies right now of the app Card element that we wanted to make sure that these

things run themselves from left to right.

We would find that app dash route element I would select it.

I could then open up the CSF panel right here and inside of element dot style I'll add in a manual style.

So I'm going to say display and I'll hit tab to set the value is flex so as as soon as I do so I'll

now see my card span from left to right.

That's how we just get our cards to spend left or right we just apply the display of flex to the app

root element.

So that's simple enough.

Right now we need to figure out how to go back over to our project we need to figure out where to add

this new styling to okay.

So back over here there are now three locations where we can add some CSF to inside of our project.

The first is styles Dot's USS.

Now remember this file's all about global styles right now we are not trying to add in a global style

that's going to be applied to an entire class of elements inside of application.

Instead we want to apply a style to a very specific element.

But I think that adding that style to styles Nazi SS is not appropriate but instead we're going to find

our apt component Nazi SS file it would be more appropriate to apply some styling inside of here because

this Yes s file is going to affect our app component alone and that's really what we're trying to do

right now.

We just want to effect the app components.

Now here's the question how do we select the app.

Dash.

Root element.

Well to select that element right there.

Let's use some common sense like Let's write a selector that's gonna look for an element called app

dash route.

So I'm going to go back over.

I'm going to put in a selector of app dash route and I'll give it a display of flex.

This right here this is like a common sense approach right.

We write out the sector and we write the rule inside.

Let's save this.

Pull it back over and see if it worked.

I'll flip back over and sure enough.

Nope it didn't work my application reloaded and so I lost that manual style I applied and if I slept

at dash routes I will very plainly see that the element that we just tried to style we didn't get that

rule at all.

The element or the style not showing up inside of here so you might think that using the app dash route

selector to find the app root element doesn't work.

That is not quite the case.

Let me show you something kind of interesting.

If I take this real right here and cut it and go back over to styles dots CSX.

So remember this is the global style file.

If I now paste that selector and the rule inside of here and save the file now I will see everything

laid out correctly.

So what does this tell us.

Well it tells us that the app dash route selector works.

We can use that to select the app root element but we can't use the app route selector inside of the

app components.

Yes that's file though at the very start this video I mentioned that there's a big gotcha here.

So let me just get to the point and tell you what the gotcha is we spoke earlier about how a components

SS file can only affect elements that are created inside of that components template file.

That's true.

We can also affect the styling of our host element that is the app root right there but we cannot affect

the host element by writing out the name of the host element directly.

Instead we have to use a very special selector the very special selector we're going to write here is

colon ost that finds our host element of the app component because we are writing this inside the app

component the as file the host element for our app component is app dash route.

That's how we select that element right there.

That's how we select our host element inside of the accompanying components CFS file.

Now on and host inside there we can add our display of flex.

I'm going to go backwards the styles Nazi SS because we still have this one over here.

I'm going to delete that extra one and save both these files.

Now if I go back over to my browser I will see that my cards are now laid out from left to right.

And if I open up my CSX inspector on the app route element I'll see that I did in fact successfully

apply a styling rule from the app components.

Yes as file okay so that's it.

That is the big gotcha I just wanted to be aware of if we ever want to select a host element from inside

of that components the SS file we just have to use the colon host selector really quickly on that element.

I'm going to add on to other roles here and also add on Justified content of space between and a flex

wrap of wrap on and save this if I flip back over I'll see that I now get some nice spacing between

each card and as I start to shrink the screen it's going to automatically collapse and show these cards

on separate lines just a handle mobile devices.

Okay.

Well this looks pretty good.

Let's take a pause right here and do a wrap up in the next video.