Angularjs component styling Part III : using ngClass

Angularjs is a front end library for create beautiful interactive web application using Nodejs ( JavaScript). If you are familiar with Reactjs , may catch it faster. The initial setup for Angularjs require the following

  • NMP
  • Nodejs
  • Angular CLI
  • TypeScript

Angular used TypeScript, so better to learn some basics, almost everything in TS is same as JS does, with some changes. It is a superset of JS.

The Project Structure

Angular Project Structure

With CLI command ng new <project-name> we can create Angular project on the top of Nodejs with above file structure

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).

ngClass allow us to define and apply set of Styles and properties to a component.

Define Object and property

In class definition declare property with class.

public isClicked = true;
  public btnSpecial = {
    "btn": !this.isClicked,
    "btn-clicked": this.isClicked,
    "btn- special":  this.isClicked


Define CSS

In your app component.css file define a simple button class

    background-color:rgba(51, 134, 243, 0.986);
    margin: 5px;
    padding: 4px;
    color: white;
    border: 1px;
    border-radius: 2px;
.btn-clicked {
  background-color: rgba(243, 153, 51, 0.986);  
  border-color: rgb(255, 0, 0);

   border-style: double;
   border-block-start-color: aquamarine;


It is possible bind the style object we created to accommodate multiple style, using the ngClass as follows

<button [ngClass]="btnSpecial">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.

I know the above example is minimal , you can experiment much more , first I suggest have a clear understanding about CSS. A project based tutorial may help you[You Tube/Udemy].

Keep reading Angular posts

Published by


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: Logo

You are commenting using your 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.