Let's follow the steps to add date localization to our blog posts so that they will display in the format our readers would expect:

1. We'll start by adding a simple date object to our /src/app/posts/post/post.component.ts component:

postDate = new Date();

2. This will set the blog post date to the current time, which is good enough for this recipe. We can now use that date property in our template and pipe it into Angular's built-in date formatter:

<small class="pull-left">Posted - {{ postDate | date:'shortDate' }}</small>

3. This will display the current date for us in a shortened format, such as 2/13/17. Next, we will need to provide a LOCALE_ID for Angular to have available to localize content for us. Let's extend our /src/i18n-providers.ts file from the last section to add this capability:

const locale = document['locale'] as string;

export function getLocaleProvider(): String {
  return locale;
}

4. This will return the locale setting from the document.locale property that we set in the preceding section. Finally, we will need to provide Angular with this value and map it to the LOCALE_ID property from Angular core in order for the Date formatter in Angular to use it:

import { NgModule, LOCALE_ID } from '@angular/core';
import { getLocaleProvider } from "./i18n-providers";

@NgModule({
 ...
 providers: [{ provide: LOCALE_ID, useFactory: getLocaleProvider }],
 ...
})
export class AppModule {}

5. With this change, our application's shortened date will now display in a localized format, based on the locale value provided for it in the browser.