Hey guys, i have a need to select few HTML elements in order to change their properties and maybe animate them in the future. In jQuery i would do something like this:
(’#elementid’).css(‘background-color’, ‘yellow’)
How should i do this in Ionic, is there a way ?
Thanks in advance. Cheers!
You are thinking backwards. In Angular you bind things to properties, and you do not deal with the DOM directly.
<foo [style.background-color]="bgcolor">
Then whatever you assign to the bgcolor property in the controller will be reflected in the template.
I’ve tried but it didn’t work. Am i doing something wrong?
copyright must be a component variable not a sass variable.
export class HomePage(){
copyright: string = "#000";
}
That didn’t help me neither 
Please stop posting screenshots, rather copy paste code and format it with < /> . Screen readers can’t deal with screenshots as you might know. Plus I don’t want to move away from the forum and load up some images if I want to help someone. Enough with the rant, on to your question:
Since the toolbar isn’t a native HTML element but actually consist of different elements (it’s a component, some HTML inspection should have shown that to you), you can’t directly apply a background-color like you’re trying to. If you want to change the color of the toolbar, do this:
<ion-toolbar color="myPrimary"></ion-toolbar>
If you want to know why it works like this (it’s Ionic specific in this case, but also the Angular way of binding) read some documentation about theming your Ionic app.
I did that and it changed background color, not text color.
Then please be more specific because your OP clearly has an example containing the background-color. That’s why I don’t like screenshots, because I have to search in your code what you’re trying to achieve instead of reading it out of your post. If you actually had read the documentation I just posted, you would have noticed how you could override the ionic sass variables. Which you obviously are trying to do because you want a different text color.
Add this to your variables.scss (it holds your apps main variables for styling).
$toolbar-md-title-text-color: pink;
$toolbar-ios-title-text-color: purple;
If you want to maintain the variable from your $colors variable, try this:
$toolbar-md-title-text-color: color($colors, copyright);
If you only want that specific toolbar-title with a different color, just use some regular css and add this to the compnent it belongs to:
.toolbar-title-md, .toolbar-title-ios {
color: color($colors, copyright)
}
If you want to do it dynamically, use ngClass.
Relax mate i am here to learn, and i can’t learn without asking stupid questions right? 
Anyways, this worked!
It changed color of footer text color on each page which is exactly what i wanted!
I changed my post to reflect your question about applying it on a component only. Only thing I’ve trouble with is that sometimes people don’t really read when they get a question, because it was already in the answer (reading documentation). There’s no thing like stupid questions when you’re learning, but sometimes it feels everything has to be spelled out even if the answer’s already been given 
When you’re coming from a jQuery background, it can be a little bit of a hassle to switch to Angular way of thinking. It’s just different, but definitely for the better.
The phrase “stupid questions” includes some things that are perfectly acceptable and others that are not.
It’s absolutely OK not to know things. We’ve all been there. It’s absolutely OK to ask something that seems absolutely mysterious to you but might seem completely obvious to somebody else.
What isn’t OK is to post questions in a manner that wastes time of volunteers that are trying to help you. That includes posting text as screenshots, and phrasing your initial question in a way that indicates that you want to set background color. Both I and @luukschoen tailored our responses toward you wanting to set the background color.
You will get better results if you ask better questions.