Skip to main content

Host Element Selector in Angular for CSS Styling


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.




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


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 



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.


Popular posts from this blog

How do I change the time zone of my Amazon RDS database instance?

As we know bydefault time in the format of UTC in mysql.We can set local time zone to our AWS RDS Instance for our application. or any other time zone prefared Cloud Based Website Hosting Service Provider Steps 1: Go to Services and Select RDS Now to change time zone we have to change "Parameter Group" in left side that is associated with DB instance first we can check default Parameter Group for our instance is Parameter group default.mysql5.7  ( in-sync ) like this. So we have to change the time zone in this Parameter Group.  now open that parameter group (default.mysql5.7)  and click on edit parameter. then search for time_zone (because we want to change it.) then we have to change time_zone only by default it is engine-default (that is utc)  we have to select Asia/Calcutta.  More information we can ref.

Changing the Time Zone on Amazon Linux Ec2 Instance

Amazon Linux instances are set to the UTC (Coordinated Universal Time) time zone by default, but you may wish to change the time on an instance to the local time or to another time zone in your network. Important These procedures are intended for use with Amazon Linux. For more information about other distributions, see their specific documentation. To change the time zone on an instance Identify the time zone to use on the instance. The  /usr/share/zoneinfo  directory contains a hierarchy of time zone data files. Browse the directory structure at that location to find a file for your time zone. [ec2-user ~]$ ls /usr/share/zoneinfo Africa Chile GB Indian Mideast posixrules US America CST6CDT GB-Eire Iran MST PRC UTC Antarctica Cuba GMT MST7MDT PST8PDT WET Arctic EET GMT0 Israel Navajo right W-SU ... Some of the entries at this location are directo

Digital Marketing

What actually is Digital Marketing? This post will help you understand the insights of Digital Marketing What is Digital Marketing? Digital Marketing is an integral part of the overall marketing strategies of any business. It basically covers the advertisement of products/services/business/brand via digital channels. The digital channels could be of any type like websites, search engines, social media, emails, SMS, and MMS. In case if you're using all these digital channels for the marketing, make sure to have all the statistics & workflow of your campaigns via marketing automation. What are the types of digital marketing? Well, there are 6 core digital marketing types: Search Engine Optimization (SEO) : Search Engine Optimization is nothing but a long-term process of improving your website rankings on search engine results pages (SERPs), which in turn has a wide range of tactics & strategies to implement. Although there is no specific method or a  spec