How to delay an observable in Angular 6 / Typescript

Question

I have the following method GetCurrentUserDelayedTest that i wanted to put a delay on. I have left the original implementation here GetCurrentUser to demonstrate how i was originally using it:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { User } from '../models/user';

export class UserService {

    // Normal method without delay
    public GetCurrentUser(): Observable<User>
    {
        return of(new User(""));
    }

    // Method with delay attempt at code
    public GetCurrentUserDelayedTest(): Observable<User>
    {
        var observable = new Observable<User>((observable) => {
            setTimeout(() => {
                return observable.complete();
            }, 2000);
        });

        observable.subscribe(() => {
            return of(new User(""));
        });

        return observable;
    }
}

I'm trying to delay the method from returning its data by 2 seconds.

What am i doing wrong? I'm brand new to angular 6 and typescript.

I'm calling it like this:

this.userService.GetCurrentUserDelayedTest()
    .subscribe((currentUser) => {
        this.loadingGameState = false;
    });

The "Loading App" part remains on screen (no errors are thrown) rather than updating the view to show "Welcome"

<div *ngIf="loadingGameState">Loading App</div>
<div *ngIf="!loadingGameState">
  Welcome
</div>

Edit:

Argument of type 'Promise' is not assignable to parameter of type 'OperatorFunction'. Type 'Promise' provides no match for the signature '(source: Observable): Observable'.

Answer 1

you can use delay function

public GetCurrentUserDelayedTest(): Observable<User>
{
    return of(new User(""))
       .pipe(delay(2000));
}

Answer 2

A more detailed example using HttpClient:

of(null).pipe(
  delay(2000),
  flatMap(() => {
    return this.http.post<any>(url, params);
  })
);

Answer 3

https://stackblitz.com/edit/angular-mznw5m?file=src%2Fapp%2Fuser.service.ts

Use in the declaration of the Observable observable.next() so you can trigger the subscribers.