app.module.ts
import { registerLocaleData } from '@angular/common';
import localeIndia from '@angular/common/locales/en-IN';
import localeIndiaExtra from '@angular/common/locales/extra/en-IN';
registerLocaleData(localeIndia,localeIndiaExtra);
@NgModule({
---------
---------
providers : [ProductRepository,ProductDataSource,{provide:LOCALE_ID,useValue: "en-IN"}]
---------
---------
})
app.component.html
----------
<span>{{100|currency}}</span>
---------
Expected Output: ₹100.00 Actual Output: US$100.00
It's the expected behavior. You can find more here.
Providing the LOCALE_ID will only make sure the format of the currency with the separators (decimal and thousands) not the symbol.
In order to get the symbol you can specify like the following:
<span>{{100|currency:"INR"}}</span>