Trying to add a component to smart admin

Question

I'm working on an already working website which was built using Smart Admin template.

I'm trying to add a component to the dashboard as a first step.

Here are the commands and steps I followed:

-Command line:

ng g module test --routing
cd test
ng g component test --flat

-Added in file app.routing.ts:

{path: 'test',loadChildren:'app/test/test.module#TestModule'}

-Added in file test-routing.module.ts:

import { TestComponent } from './test.component';

const routes: Routes = [
  {
  path:'',
  component:TestComponent
  }
];

-Added in file test-routing.module.ts

import { SmartadminModule } from '../shared/smartadmin.module';

and

SmartadminModule inside imports:[]

The test.component.html only contains:

<p>
  test works!
</p>

When i call the page I'm getting the dashboard,header, footer... However in other modules in the project, the dashboard ... are included explicitly by adding :

<sa-header></sa-header>
<sa-navigation></sa-navigation>
<div id="main" role="main">
  <sa-ribbon></sa-ribbon>
  <router-outlet></router-outlet>
</div>
<sa-footer></sa-footer>
<sa-shortcut></sa-shortcut>

I hope someone can help me solve this problem.

Thank you

Answer 1

I suppose that the snippet with layout you provided is from app.component.html. So you can change it a bit to look like this:

<router-outlet></router-outlet>
<sa-footer></sa-footer>
<sa-shortcut></sa-shortcut>

And then have a test.component.ts look like this

<sa-header></sa-header>
<sa-navigation></sa-navigation>
<div id="main" role="main">
  <sa-ribbon></sa-ribbon>
  <!-- Other components or HTML code -->
</div>

What I can't tell is how will this change affect other routes and if it's a desired behavior.

Might be better to keep the HTML as is and do a minor change in app.component.ts

import { Router, NavigationEnd } from '@angular/router';

showHeaderAndNavigation: boolean = false;

ngOnInit() {
  this.router.events.filter((event: any) => event instanceof NavigationEnd)
  .subscribe(event => {
    this.showHeaderAndNavigation = event.url === '/test';
    //console.log(this.showHeaderAndNavigation);
  });
}

And then you can change your app.component.html

<sa-header *ngIf="showHeaderAndNavigation"></sa-header>
<sa-navigation *ngif="showHeaderAndNavigation"></sa-navigation>
<div id="main" role="main">
  <sa-ribbon></sa-ribbon>
  <router-outlet></router-outlet>
</div>
<sa-footer></sa-footer>
<sa-shortcut></sa-shortcut>