last day (14 days later) » 

5:48 AM
1
Q: Angular2 host css applying but not visible in browser

ZzeI am having a bizarre issue whilst creating my first Angular2 app. I am applying some CSS to a component host (example-component) yet it doesn't appear in the browser? This is my first time posting for Angular in SO, so hopefully I include everything needed to attain some help. example.compone...

 
change :host-context (.lg){} to :host .lg{} and check.
 
Zze
@micronyks Doesn't apply it to the element.
 
There are many other ways to do it.
Its working. maybe browser issue. try to run with chrome.
 
Zze
@micronyks I have tried it in chrome, firefox & IE - all yield the same result. I don't understand why it's applying, but isn't getting rendered.
 
check this plnkr.co/edit/ukANx4wcCYFXvx2BXWly?p=preview its working as expected without encapsulation. I also checked with mozilla and its working.
 
Zze
5:48 AM
@micronyks I don't understand - imgur.com/BKsToTn
 
please check again I updated link.
please visit link again.
 
Zze
looking now
Still doesn't appear with the black background
Maybe it is just a browser compat issue ?
I'm running FF 49.0.1
 
Zze
hmmmmmmm... very interesting, the text appears red - I only just noticed that, so it is infact applying the script!
just not the background colour?
 
now visit last link again
 
Zze
5:53 AM
That new link / edit has the black background! What changed?
 
background color is also applied
i changed it to blue color and its working
is it working?
 
Zze
If I wrap the Angular2 text in a <div> it doesn't appear anymore > http://plnkr.co/edit/pnVmMupmeokTE4LNebXr?p=preview
Is this the same for you?
p.s. really appreciate the help :)
 
ah ha.
this way it doesn't work because you are targeting host element
 
Zze
Sorry, but I don't understand. Do you mean that the <div> becomes the new "host" ?
 
for that you have to go with this way.
I understood you problem now.
your*
 
Zze
6:05 AM
Won't that then apply the background colour to .abc then and not the host?
 
yes
I recently answered for the similar question.
 
Zze
So if I want it on the host, then I should just apply the CSS globally to the element?
I have to leave now,
I look forward to your reply.
Cheers for the chat & help.
 
welcme.
 

last day (14 days later) »