Translate date return and manipulate days

Question

I am using a card that returns me actual data of the day, month and year. It’s actually four cards, two with year and month, and two with year, month and day.

The problem is that on my return I want to display in Portuguese-BR and that I can manipulate so that I can display not only the current day, but yesterday (for example). I’m using the html component:

{{ hoje | date:'MMMM' | uppercase }}

and in comoponente.ts I declare property today in that way:

hoje: number = Date.now();

This way is being displayed: the current day ok Yesterday, I couldn’t find a way to fix it so that it shows month: as I read in the documentation, I passed the 'MMMM' reference for the month to be displayed in full and on the other card only 'MMM' to display the first three letters. Returns me respectively: September and SEP. I would like to adjust the two situations. Translation and display for yesterday. I have tried injecting the LOCALE_ID no providers of my Appcomponent, setting to en and now with only 'en', but unsuccessfully. Even in the attempts as some examples I saw, the date of the display in the browser disappears when I interpolate.

{{ hoje | date:'MMMM' | uppercase }}

-> SEPTEMBER I NEED = SEPTEMBER

{{ hoje | date:'MMM' | uppercase }}

-> SEP I need = SET

<td rowspan="2" class="dia-setado">{{ hoje | date:'dd' }}</td>

-> 25 I need it but I also need one that returns yesterday’s date.

Answer 1

Hello, to do this I suggest you two ways. The first would be to set the locale at Angular so it translates to the desired language automatically. The second would be to create an array with months and use a function to translate the date.

Example of how to do the first way:

//app.module.ts
import { LOCALE_ID } from '@angular/core';

@NgModule({
  imports:      [ ... ],
  declarations: [ ... ],
  bootstrap:    [ ... ],
  providers:    [{ provide: LOCALE_ID, useValue: 'pt' }]
})



//component.ts
import { registerLocaleData } from '@angular/common';
import localeBr from '@angular/common/locales/pt';

export class AppComponent  {
  constructor() {
    registerLocaleData(localeBr, 'pt');
  }
}

Example in the stackblitz: https://stackblitz.com/edit/angular-lj7fg9

Answer 2

So boss, I’m not sure I understand your question, but I’ve formulated an answer here based on what I understand, you can see an example here:

To translate the month, in the module, which can be the app.module

• Import the LOCALE_ID
• Import the registerLocaleData
• Import the ptBr
• Declare the registerLocaleData passing the ptbr
• declare a prior by passing the LOCALE_ID

Getting the following way your module:

import { NgModule, LOCALE_ID } from '@angular/core';
...

import { registerLocaleData } from '@angular/common';
import ptBr from '@angular/common/locales/pt';
registerLocaleData(ptBr)

@NgModule({
   ...
   providers: [{ provide: LOCALE_ID, useValue: 'pt-PT' }],
})
export class AppModule { }

In Html just declare

{{data | date: 'MMM' | uppercase}} - {{data | date: 'dd'}}

To show, the day before

In its component

ontem: Date = new Date();

ngOnInit() {
   this.ontem.setDate(this.ontem.getDate() -1);
}

In your Html:

{{ontem | date}}