Address Book - Part 5 ( CSS Styling our Angular app )

In the previous post, our contact list looked like this:

Looks very mundane. Let us beautify our Address Book.

CSS styling is the way to go! There are different ways to add styling to our angular app.

1. Make changes in the style.css file in the src folder. This will be applied across the entire app ie global.
2. Adding the style tag to the specific component

1. .....
   
   @Component({
     selector: 'contacts',
     templateUrl: './contacts.html',
     styles : [
       `
   .contactList {
     padding: 0;
   }
   
   .contactList li{
     list-style-type: none;
     padding: 0.25em;
     width: 15em;
     cursor: pointer;
     background-color: lightblue;
     color: navy;
     border: 0.01em solid lightgrey;
     border-radius: 0.2em;
     text-align: left;
     margin: 0.5em;
   }
   
    .contactList li:hover {
       background-color: dodgerblue !important;
       color: white;
     }
     
     .contactList li.selected:hover{
       background-color: yellow;
     }
   `
       
     ]
   })
   export class ContactComponent{ .... }
   

2. Adding styleUrl tag to the specific component and pointing to style file
Create a new file contacts.css in the src folder. 

.contactList {
  padding: 0;
}

.contactList li{
  list-style-type: none;
  padding: 0.25em;
  width: 15em;
  cursor: pointer;
  background-color: lightblue;
  color: navy;
  border: 0.01em solid lightgrey;
  border-radius: 0.2em;
  text-align: left;
  margin: 0.5em;
}

 .contactList li:hover {
    background-color: dodgerblue !important;
    color: white;
  }
  
  .contactList li.selected:hover{
    background-color: yellow;
  }

Next make the following changes in the contact.component.ts

....
@Component({
  selector: 'contacts',
  templateUrl: './contacts.html',
  styleUrls : [ './../contacts.css']
  
})
export class ContactComponent{ ... }

Along with styling the contact list (I have applied style using option 3 ie created a new style file), we  will style the contact details component.

contact_details.component.ts:

@Component({
    selector : 'contact-details',
    templateUrl : './contactDetails.html',
    styles : [
        `label{
            
            font: bolder;
            color: navy;
            font-size: 12;
            padding : 2px
}`,
        `
        * {
            color: black
        }
        `
    ]
})
export class ContactDetailsComponent{ ... }

Now let us look at the Address Book after applying CSS styling:

Useful link: Angular Index