Well, our application is just about complete, but if we go back and look at our original mock up,
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 CSSs to make sure that these cards span left to right now
in order to do this, are going to have to understand a little bit more about how angular handles css.
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, I'm going to first just show you directly what access
rules are going to apply to which element inside the browser.
Once we understand what we're going to apply and which element we're going to apply it to, will then
go back over to our editor and we'll figure out how to essentially translate the css into the angular world.
OK, so I'm going to right.
Click anywhere on the screen and hit inspect.
I'll then pull up my element, inspector.
And then inside of here, if we look at our e-mail structure, we'll see that we've got the body inside.
There is our app-root element, the app-root element, remember, that represents our app components.
We refer to this as our host component or our host element for the app component.
So in other words, when are 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 going to 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 root, if we expand that, we'll see five copies of the app cast and use it for copies.
We've only got four copies right now of the app card element.
So if we wanted to make sure that these things run themselves from left to right, we would find that
app-root element, I would select it.
I could then open up the css panel right here and inside of elements 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.
And so as soon as I do so, I'll now see my current span from left to right.
That's how we just get our cards to span left or right.
We just apply the display of flex.
So the app-root element.
So that's simple enough, right?
So 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.
OK, so back over here, there are now three locations where we can add some css to inside of our project.
The first is Styles's css.
Now, remember, this is 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 instead of application.
Instead, we want to apply a style to a very specific element.
I think that adding that style to styles is not appropriate.
So instead, we're going to find our app.component.css file.
It would be more appropriate to apply some styling inside of here because this css 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 component.
Now, here's the question, how do we select?
The app dash route element, well, to select that element right there, let's use some common sense,
like let's write a selector that's going to 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-root and I'll give it a display
this right here, this is like a common sense approach, right?
We write out the sector and we write the rule inside.
app-root{
display:flex;
}
Let's save this.
Look back over and see if it worked.
A 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 kashrut, 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 element doesn't work, that
is not quite the case.
Let me show you something kind of interesting if I take this rule right here and cut it.
And go back over to Stiles access.
Remember, this is the global style file, if I now paste that selector and the role 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 selector works.
We can use that to select the app element, but we can't use the app-root selector inside of the app.components.css
File.
So at the very start of this video, I mentioned that there's a big gotcha here.
So let me just get to the point and tell you what the Gocha is.
We spoke earlier about how a component CSS 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 route 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 right here is
:host{
}
That finds our host element of the app component because we are writing this inside the app component,
Dasia says file.
So the host element for app component is app dash root.
That's how we select that element right there.
That's how we select our host element inside of the accompanying components access file.
Now on host inside there we can add our display of Fleck's.
I'm going to go back over to the stylized text 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 success inspector on the app route element, I'll see that I did, in fact, successfully
apply a styling rule from the app components.
Yes, file.
OK, so that's it, that is the big gotcha.
I just want you to be aware of if you ever want to select a host element from its side of that component
CSS file, we just have to use the current host selector it really quickly on that element.
I'm going to add on to other rules here and also add on justify content of space between.
And a Fleck's rap of rap.
Well, then 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 to handle mobile devices.
OK, well, this looks pretty good.
So let's take a pause right here and do a wrap up in the next video.
Comments
Post a Comment