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

Just to check, your issue is, that the routing does not navigate to your `test` component? — mat.hudak, Jul 22 '19 at 10:47
No my issue is that, i dont want the dashboard and header to show unless I add them to test.component using Thank you — Elie, Jul 22 '19 at 10:49

score 1 · Answer 1 · answered Jul 22 '19 at 11:28

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>

Thank you for your reply. There is no app.component.html in the project. The snippet I provided is from another file called payment-services.component.html and when i remove the snippet from this file, the dashboard, header and footer disappear. I want the new module i'm adding (Test) to act the same way. — Elie, Jul 22 '19 at 11:44
Could you please provide stackblitz? I'm bit confused of what are you trying to achieve — mat.hudak, Jul 23 '19 at 06:25
Thank you dallows for your concern. My project is not on stackblitz. Can I provide you team viewer access in a way so you can check what i mean ? — Elie, Jul 23 '19 at 07:39
Do you have a GitHub repo? It might be easier as I can't allow much time for a "video call" — mat.hudak, Jul 24 '19 at 05:42

Trying to add a component to smart admin

1 Answers1