Angularjs component styling Part I


Styling using class attribute

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. One of the conventional way is to use the class attribute.

class attribute

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;  }

The second step is the apply the style to in component.html (your basic component template).

<button class="btn">OK</button>

That’s it. In the next post we will discuss about the Angular way.

Keep reading Angular posts

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.