A2 reinitialization of date component

Question

I am working on Angular 2 project in which I need to use this date range picker:

https://www.npmjs.com/package/ng2-daterangepicker

A date picker constist of a set of options represented by a json object that we pass trough a template. For example:

input type="datepicker" [options]="myDatePickerOptions" ...>

I want to allow user to translate the website by choosing the one language from the list (translation is done, everything working fine except date picker).

The idea is that we translate the calendar once user select a new language (which should be simple as just updating the json object that represents an options myDatePickerOptions). However, when I update settings nothing changes.

I come to the conclusion that, once initialized, date picker couldn't be changed. Therefore, I thought the way to achieve my goal is to re-initialize component, re-render or whatever you want to call it.

My question is how do I re-initialize the child component (so the construct, ngoninit and all other stuff get called).

Answer 1

When the components are referenced in templates and not added dynamically you don't have a reference to the componentRef to destroy a view. But ngIf can do that so you can use it to re-initialize the component like this:

<ng-container *ngIf="toggle">
    <input type="text" name="daterangeInput" daterangepicker [options]="options" (selected)="selectedDate($event)">
</ng-container>