Studying Angular2. There is a variable output in the component template header:

<div class="header-block header-block-search"> {{ date | date:'dd-MM-yyyy HH:mm:ss' }} </div>

In the .ts component itself:

 export class HeaderComponent implements OnInit { date: Date = new Date(); ...
  1. How to make the option to time (seconds) dynamically changed on the page?
  2. How to make an option for the date format: 'dd-MM-yyyy HH: mm', so that the ":" symbol flashes every second?

I understand intuitively that you need to look towards the creation of an asynchronous pipe, but have not yet found an example of how to implement it.

  • It is possible to update the timer every second value - Alex78191

2 answers 2

It was possible to solve the first question as follows:

header.component.html

 <div class="header-block header-block-search"> {{ date | async | date:'dd-MM-yyyy HH:mm:ss' }} </div>

header.component.ts

 import { Observable } from 'rxjs/Rx'; import { Subscriber } from 'rxjs/Subscriber'; @Component({ selector: 'exd-header', templateUrl: './header.component.html', styleUrls: ['./header.component.css'] }) export class HeaderComponent implements OnInit { date = new Observable<string>((observer: Subscriber<string>) => { setInterval(() => observer.next(new Date().toString()), 1000); });

    The first part in my opinion could be done like this:

     <div class="header-block header-block-search" [attr.innerText] = "date | date:'dd-MM-yyyy HH:mm:ss'"> </div>

    And the controller could be done through the same setInterval