toLocaleDateString is not a function when called dynamically in Angular runtime

Question

I have an Array of Elements of the type ActionInstruction. Some get added in the constructor of the component, others are added dynamically by the user via a dialog form field.

 actionInstructions: ActionInstruction[];

 constructor(private _formBuilder: FormBuilder, public dialog: MatDialog) {
 this.actionInstructions = [{post_date_start: new Date()}];
 }

 someMethod(){
    // get result of Type ActionInstruction from Dialog -> newInstruction
  this.actionInstructions.push(newInstruction);
 }

The content of the array gets displayed in the view like follows:

<div *ngFor="let actionInstruction of actionInstructions">
      <div *ngIf="actionInstruction.post_date_start"   (click)="openActionCreation(actionInstruction)" class="action-instruction">
         <div class=" fl ml-50">
          Am {{actionInstruction.post_date_start.toLocaleDateString()}}
         </div> 
      </div>
</div>

At start the elements that are added in the constructor, are getting with the localized date without any problem. But after adding an element dynamically via the form, the following error gets thrown:

At first I thought it could be caused by calling it during runtime in the view, but the problem actually occures in another totally independent component, where I prepare the variable to be shown in the view, in the constructor with the same function.

 constructor(){
   if(this.user.birthday != null){
        this.localizedBirthday = this.user.birthday.toLocaleDateString();
    }
  }

Here it seems allmost patternless when the error occures and when not. The only thing that both components have in common, that they use some *ngIf pattern in the view component, where the date get´s displayed.

SF- · Accepted Answer · 2020-06-05 13:33:44Z

2

Not a direct solution but you could use the datepipe in your components. https://angular.io/api/common/DatePipe

it would look something like this:

<div class=" fl ml-50">
  Am {{actionInstruction.post_date_start | date:'medium' }}
</div>

answered Jun 5, 2020 at 13:33

SF-

1614 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

toLocaleDateString is not a function when called dynamically in Angular runtime

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related