Delay component's html angular 2

Question

I would like to do a such thing. When the component load then after 1 seconds to load it's html. This is code component (ts).

import { Component } from '@angular/core';

@Component({
   selector: 'pagination',
   templateUrl: './app/html/pagination.component.html',
   styleUrls: ['app/css/pagination.component.css']
})

export class Pagination {}

We see in the code templateUrl: './app/html/pagination.component.html',How it to load after 1 seconds? In general my idea comprises in show a loading with delay(1 sec) for users while execution post request on server. Have anyone any ideas?

Answer 1

Try to use ngIf directive.

So it will look something like this:

<div *ngIf="showContent">Will appear after ~1 sec</div>

in component code:

export class Pagination {
    public showContent: boolean = false;
    public ngOnInit() {
      setTimeout(()=>this.showContent=true, 1000);
    }

}