Using this feature breaks my app routing

[ErHamza]

Somehow the tag breaks my app.
after using it in my html template I coudnt't use my navigation bar and the content of my component has disappeared
this is my home.component.ts

import { AfterContentInit,
    ChangeDetectionStrategy, Component, 
   ElementRef,
    OnDestroy,
    OnInit,
    Renderer2,
     } from '@angular/core';
import { TextAnimation } from 'ngx-teximate';
import { rotateInDownLeft, fadeIn } from 'ng-animate';



@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
  
})
export class HomeComponent implements OnInit , AfterContentInit,OnDestroy  {
  

  

  constructor(private renderer : Renderer2, private el : ElementRef) { }
  
 
  text = 'Start editing to see some magic happen :)';
  
  enterAnimation: TextAnimation = {
    animation: fadeIn,
    delay: 50,
    type: 'letter'
  };
  ngOnInit(): void {
  }

  

 
  

  ngAfterContentInit(): void {
    
    
    
    this.renderer.setStyle(this.el.nativeElement.ownerDocument.body,'backgroundColor', '#d8dee9');
  
  
  
  }

  ngOnDestroy(): void {
    this.renderer.removeStyle(this.el.nativeElement.ownerDocument.body,'backgroundColor');
    
  }


}

HTML template :

<h1>
	<teximate #teximate [text]="text" [enter]="enterAnimation"></teximate>
</h1>

<button (click)="teximate.enterPlayer.play()">Play</button>

I have done the necessary imports in app.module.ts.