Loading a different component.html file from a component.ts file? - node.js

Question

I'm new to angular and I was wondering how I could load a different home.component.html file from a method that's inside books.component.ts.
This is my books.component.ts file.
import { Component, OnInit } from '#angular/core';
import {BooksService} from '../books.service';
import {NgForm} from '#angular/forms';
import { Router } from '#angular/router';
#Component({
selector: 'app-books',
templateUrl: './books.component.html',
styleUrls: ['./books.component.css']
})
export class BooksComponent {
constructor(private httpService: BooksService, private router:Router) {
}
status : any;
onSubmit(f: NgForm) {
console.log("AM I HERE AT LEAST");
this.httpService.checkLoginCred(f.value).subscribe(
data => {
// console.log(Object.values(data)[0]);
this.status = Object.values(data)[0];
if(this.status === "Successful"){
var path = "../home/home.component.html";
// console.log($location.path());
//console.log(this.router);
this.router.navigate(['/home']);
console.log("GREAT!");
}
return true;
}
);
}
}
my app.module.ts looks like so:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BooksComponent } from './books/books.component';
import { HomeComponent } from './home/home.component';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
#NgModule({
declarations: [
AppComponent,
BooksComponent,
HomeComponent,
],
imports: [
RouterModule.forRoot([
{
path: 'home',
component: HomeComponent
}
]),
BrowserModule,
HttpClientModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
my books.component.ts and books.component.html files are in my books directory.
my home.component.ts and home.component.html files are in my home directory
I've attached a screenshot of how my directory structure looks like.
So far I'm trying to use this.router.navigate but I'm not having much luck with that.
Any help would be greatly appreciated!
EDIT
My home.component.ts file looks like so:
import { Component } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
constructor() { }
}

Answer 1

As we discussed - here is the solution - hope it works
Add only <router-outlet></router-outlet> on app.compoment.html and using routing try to render the components
Your route should read as
RouterModule.forRoot([
{
path: 'home',
component: HomeComponent
},
{
path: 'book',
component: BookComponent
},
{
path: '',
redirectTo: 'book'
pathMatch: 'full'
}
])
Thus on the initial load your path will match empty and redirect to BookComponent and inside the book component when you navigate it will load the HomeComponent inside the AppComponent html
Hope this might solve your problem - happy coding :-)