Angular JS - Styles

We have managed to create components, services, we also saw how injection pattern works. There is something we have ignored for a long time, have a better styled UI. After all good styles make for better looking views

There are 2 ways we can style our components
1. Through css file
2. Do it inline

Style with CSS file
Add a new file in src/css directory - contact-list.css, paste this code in

contact-list.css 

ul {
    list-style-type: circle;
    margin:16px 0;
    padding:0;
}

li {
    cursor: pointer;
    transition: padding 0.3s;
    margin: 0;
    display: inline;
    font-size:16px;
}

li:hover {
    padding-left: 8px;
    color:#233dcb;
    font-weight:bold;
    border-left: 3px solid #233dcb;
}

.clicked {
    color: #233dcb;
    font-weight:bold;
}

Open up Contact-list.component.ts, add a property to component "styleUrls" and reference contact-list.css file.

Code is not much different from what we had in the past, except for "styleUrls" addition

Contact-list.component.ts

/**
 * Created by krishnansriram on 5/13/16.
 */
import {Component, OnInit} from 'angular2/core';
import {ContactDetailsComponent} from "./contact-details.component";
import {ContactService} from "./contact.service";
import {Contact} from "./contact";

@Component({
    selector: 'contact-list',
    template: `
        <ul *ngFor="#contact of contacts">
            <li (click)="onSelect(contact)" [class.clicked] = "selectedContact === contact">
                {{contact.firstName}} {{contact.lastName}}
            </li>
        </ul>
        <contact-details [contact]="selectedContact"></contact-details>
    `,
    directives:[ContactDetailsComponent],
    providers: [ContactService],
    styleUrls:["./../src/css/contact-list.css"]
})
export class ContactListComponent implements OnInit{
    public contacts:Contact[];
    constructor(private _contactService:ContactService) {
        
    }
    public selectedContact = {};

    onSelect(contact) {
        console.log("Header tapped");
        this.selectedContact = contact;
    }
    
    getContacts() {
        console.log("Load contacts - Contacts-list component ");
        this._contactService.getContacts().then((contacts:Contact[]) => this.contacts = contacts);
    }
    
    ngOnInit(): any {
        console.log("OnInit method is invoked");
        this.getContacts();
    }
}

Style component - inline
Now how about having styles inline. Open contact-details.component, like the way we add styleUrls, we can add "styles" property. It takes an array and watch out for the quote used in the property. It's the same quote we used for defining template.
Sample code below

contact-list.component.ts
 

    


/**
 * Created by krishnansriram on 5/13/16.
 */
import {Component} from 'angular2/core';

@Component({
    selector: 'contact-details',
    template: `
        <div>
            <div>
                First Name: <input type="text" [(ngModel)]="contact.firstName" id="first-name">
            </div>
            <div>
                Last Name: <input type="text" [(ngModel)]="contact.lastName" id="last-name">
            </div>
            <div>
                Designation: <input type="text" [(ngModel)]="contact.designation" id="designation">
            </div>
            <div>
                Phone Number: <input type="text" [(ngModel)]="contact.phoneNumber" id="phone">
            </div>
            <div>
                EMail Id: <input type="text" [(ngModel)]="contact.emailId" id="email">
            </div>  
        </div>
    `,
    inputs:["contact"],
    styles:[`
        label {
            display: inline-block;
            width: 140px;
        }
        input {
            width: 250px;
        }
    `]
})
export class ContactDetailsComponent {
    public contact = {};
}