Angular provides a Title service that you can use to set the title of a page. This is good, of course, for SEO. Here’s how to use it.

import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
 
@Component({
    selector: 'my-app', 
    viewProviders: [Title], 
    template: `<h1>MyApp</h1>`
})
export class MyAppComponent {
    constructor(private titleService: Title) {}
 
 
    ngOnInit() {
        this.setTitle('My Web Page Title');
    }
 
 
    public setTitle( newTitle: string) {
        this.titleService.setTitle( newTitle );
    }
}

The service automatically creates the title element in the head if needed and also sets the value.  The service also has a getter method to get the title.

In Angular, to format a currency, use the currency pipe on a number as shown here.

<tr *ngFor="#item of data">
     <td><a href="#">{{item.invoiceNo}}</a></td>
     <td>{{item.invoiceDate}}</td>
     <td>{{item.invoiceStatus}}</td>
     <td class="right aligned">{{item.invoiceTotal | currency:'USD':true:'1.2-2'}}</td>
</tr>
  • The first parameter, 'USD', of the pipe is an ISO currency code (e.g. ‘USD’,’EUR’, etc.)
  • The second parameter, true, is an optional boolean to specify whether or not you want to render the currency symbol (‘$’, ‘€’); default is false
  • The third parameter,'1.2-2', also optional, specifies how to format the number, using the same formatting rules as apply to the number pipe.

Note, however, that the currency pipe relies on the Internationalization API, which is not available in all browsers. See current browser support for Internationalization API.

Here’s a visual example of what the example shown above renders when used on a decimal number:

Here’s how to get and print the index (or the iteration number) of the current item in an ngFor loop.

In Angular, to get the index (or the iteration number) of the current item, add a second part to the ngFor expression (after a semi-colon) as shown here.

<tr *ngFor="#item of data; #ndx = index">
     <td>{{ndx+1}}</td>
     <td>{{item.po}}</td>
     <td>{{item.serviceType}}</td>
     <td>{{item.validStart}}</td>
     ...
</tr>

Notice that I’m adding 1 to the output expression ({{ndx+1}}) because the index is zero-based. The data table row example shown above renders as follows: