replace two successive setTimeout with rxjs

I have put together a pen over at CodePen where you can see how to implement it using RxJS: Use RxJS instead of setTimeout

const observablePattern = of(true)
.pipe(
    delay(100),
    tap(() => {
        log('After 100 ms');
        setSize(50);
    }),
    delay(1000),
    tap(() => {
        log('After another 1000 ms')
        setSize(150);
    }),
    delay(500),
    tap(() => {
        log('After another 500 ms');
        setSize(100);
    })
).subscribe();

By using both the do operator and the delay operator, it should be pretty easy:

someObservable.delay(150).do(
     () => this.renderer.addClass(this.mainContainer, 'side-container')
).delay(300).do(
     () => this.renderer.addClass(this.sideContainer, 'open')
);

Observable.of(true)
    .delay(150)
    .do(() => {
        this.renderer.addClass(this.mainContainer, 'side-container');
    })
    .delay(300)
    .do(() => {
        this.renderer.addClass(this.sideContainer, 'open');
    });

Or with the new lettable/pipeable operators:

Observable.of(true).pipe(
    delay(150),
    tap(() => {
        this.renderer.addClass(this.mainContainer, 'side-container');
    }),
    delay(300),
    tap(() => {
        this.renderer.addClass(this.sideContainer, 'open');
    })
);

Source: https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md