Binding style class
You have been noticed that every Angularjs component has a …component.css. This is where place all your SASS/CSS styling classes and ids. We can also use the inline style in your component.ts file, if you prefer ( as an array).
There are few methods/ways we can apply styling elements to components. Using property of class we can bind the style.
Define class as property
In class definition declare property with class.
// style class public btnStyle = 'btn';
Define CSS
In your app component.css file define a simple button class
.btn{
background-color:rgba(51, 134, 243, 0.986);
margin: 5px;
padding: 4px;
color: white;
border: 1px;
border-radius: 2px;
}
Bind the class
In the final step bind the property of class (btnStyle) in component.html (your basic component template).
<button [class]="btnStyle">OK</button>
Class binding has higher precedence in Angular, that means when we use the both methods only the binding will work. So both can’t be used.
So what we do when need to apply a set of styles, that is for another post.
Keep reading Angular posts
- Angularjs component styling Part III : using ngClass - How to apply a set of styles using ngClass in Angularjs
- Angularjs component styling Part III : conditionally bind class - How to style Angularjs components using class binding
- Angularjs component styling Part II : binding class - How to style Angularjs components using class binding
- Angularjs component styling Part I - How to style Angularjs components
