Nothing will be perfect without animation, so lets see how you can target and write animations for entering and leaving from a component.

import { Component, HostBinding } from '@angular/core'
import { fadeInAnimation } from '../../app.animations'
import { trigger, state, style, animate, transition } from '@angular/animations'


@Component({
	selector : 'vi-home',
	templateUrl : 'home.component.html',
	styleUrls : [
		'home.component.scss'
	],
	animations: [

trigger('slideInAnimation', [
        state('*',
          style({
            transform: 'translateX(0)'
          })
        ),
        transition(':enter', [
          style({
            transform: 'translateX(-100%)'
          }),
          animate('0.6s cubic-bezier(.35,0,.25,1)')
        ]),
        transition(':leave', [
          animate('0.6s cubic-bezier(.35,0,.25,1)', style({
            transform: 'translateY(100%)'
          }))
        ])
      ])
	],
})
export class HomeComponent{

	@HostBinding('@slideInAnimation') routeAnimation = true;
	@HostBinding('style.display')   display = 'block';
}