Presently, I am working on CoreUI:
Angular CLI: 9.0.0-rc.7
I have successfully created a purchase page that displays fine individually. However, I would like to make it so that when a user clicks on the purchase page, it is displayed on the dashboard.
At the moment, my page only displays individually.
http://localhost:4200/purchase
To start, I created a purchase page in the view folder:
ng g c views/purchase
- views
- purchase
- purchase.component.ts
- purchase.component.html
- purchase.component.css
- purchase.component.spec.ts
- purchase
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'
}
},
Although my purchase page displays fine individually, I want to incorporate it into the dashboard as well.
Dashboard Image:
Currently not working in dashboard.component.html
dashboard.component.html
<app-purchase>
//empty
</app-purchase>