how to display a page on dashboard in angular?

Question

Currently I m working on CoreUI:

Angular CLI: 9.0.0-rc.7

I created a one purchase page and my purchase page is dispay fine but individually. I want to display a purchase page on dashboard when user click on purchase page???

currently my page is display but individually.

http://localhost:4200/purchase

Indivisual Page Purchase

First I create a purchase page in view folder:

ng g c views/purchase

• views
  • purchase
    • purchase.component.ts
    • purchase.component.html
    • purchase.component.css
    • purchase.component.spec.ts

purchase.component.html

<p>purchase works!</p>
<h1>this is an purchase pages</h1>
<h1>this is an purchase pages</h1>
<h1>this is an purchase pages</h1>
<h1>this is an purchase pages</h1>

purchase.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-purchase',
  templateUrl: './purchase.component.html',
  styleUrls: ['./purchase.component.css']
})
export class PurchaseComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

app.module.ts

import { PurchaseComponent } from './views/purchase/purchase.component';

@NgModule({
  imports: [
declarations: [
 PurchaseComponent

app.routing.ts

import { PurchaseComponent } from './views/purchase/purchase.component';

export const routes: Routes = [
   {
      path: '',
      redirectTo: 'dashboard',
      pathMatch: 'full',
  },
  {
      path: 'purchase',
      component: PurchaseComponent,
      data: {
          title: 'Home'
      }
  },

my purchase page is dispay fine but individually? I want to display a purchase page on dashboard?

DashBoard Image:

enter image description here

Not Work in dashboard.component.html

dashboard.component.html

<app-purchase>
    //empty
</app-purchase>

Answer 1

in app.routing.ts add your PurchaseComponent route in children section

 children: [
      {
      path: 'purchase',
      component: PurchaseComponent,
      data: {
          title: 'Purchase'
      }
  },