Components - kghandour/SE-2018-Helper GitHub Wiki

To start modifying the header bar

  1. Access the frontend folder --> src --> app --> @theme --> components --> header
  2. Open header.component.html with any text editor This is basic HTML edit as you want

P.S You can open all files with any text editor as you want. If the files show as if they are a VIDEO file open it with a text editor (Right click open with). I would recommend VSCode.

Think about the modules as different parts of your website. You can treat as the Dashboard as a Module, and inside of it there is a sub module called items.

To start modifying different components (We will take the dashboard as an example)

  1. Access the frontend folder --> src --> app --> dashboard
  2. You will find 4 files
  • dashboard-menu.ts This one is responsible for the left sidebar of the module. Each major module will have a different sidebar as you wish. To add a new item in the side bar you can add a new entry to the json array.
{ title: 'Dashboard', icon: 'nb-home', link: '/dashboard', home: true },
  {
    title: 'Items',
    icon: 'fa fa-shopping-basket',
    link: '/dashboard/items'
  }
// Add a new element 
,{
    title: 'NEW ITEM HERE',
    icon: 'fa fa-shopping-basket',
    link: '/dashboard/ROUTE TO SUB MODULE HERE'
  }
// End the file here
];
  • dashboard-routing.module.ts The concept of routing is what you type in the URL in your browser. In the children section you define what the links to your SUBMODULES
children: [
      {
        path: 'items',
        loadChildren: './items/items.module#ItemsModule'
      },
      {
        path: '',
        redirectTo: 'items',
        pathMatch: 'full'
      }
    ];

The path: '' is the DEFAULT url if the user types #/dashboard/

And you see that it redirectTo 'items' which is the path defined above it that loadChildren: './items/items.module#ItemsModule'

When you create a new SUBMODULE , you need to add it the route parent MODULE's routes file.

children: [
      {
        path: 'items',
        loadChildren: './items/items.module#ItemsModule'
      },
// ADD NEW ROUTE example checkout
      {
        path: 'checkout',
        loadChildren: './checkout/checkout.module#CheckoutModule'
      },
// THE REST 
      {
        path: '',
        redirectTo: 'items',
        pathMatch: 'full'
      }
    ];

the load children path is the folder that you have SUB Module inside of. For example inside a folder named items there is a file named items.module.ts and inside there we have the class exported as ItemsModule

  • dashboard.component.ts This is the main file that you will play with. This is the PARENT MODULE's main angular file. This is the main parts:
@Component({
  selector: 'app-dashboard',  
  template: ` //This is the html part that defines that there is a side bar 
    <ngx-main-layout>
      <nb-menu [items]="menu"></nb-menu> //side part here. Reads the components from the menu file that we talked about
      <router-outlet></router-outlet> // this part will get populated with the SUBMODULE
    </ngx-main-layout>
  `
})
  • dashboard.module.ts This file just defines the module and basically includes the files.

Moving onto the Sub Module Open the folder called Items, and inside of it there are 3 files

  • items-routing.module.ts This file is for the routing. Basically it says that if anyone writes anything in the url next to /items it will automatically direct to items

  • items.component.ts This file is the main part that you will play with a lot.

@Component({
  selector: 'app-dashboard-items',
  template: `` //Inside the template quotes write the HTML there
})

The template is the part where you will write your angular/html code. Basically anything you write here will appear on the website when you access localhost:4200/#/dashboard/items in the url

  • items.module.ts This file defines the module. Notice in the last line: export class ItemsModule {} this is the part where you define the name of the module. Notice in the dashboard-routing.module.ts file that the 'items' child links to items.module#ItemsModule . This is the file that gets linked.

Creating new modules

  1. To create a PARENT MODULE the "SAFEST" approach to be consistent is

to copy the dashboard folder with all of its contents and paste it and rename it to the name of the module you want to create. Then rename the files from dashboard-XX to parentmodulename-XX and open all the files and change all mentions of "dashboard" to "parentmodulename"

  1. To create a SUB MODULE the "SAFEST" approach to be consistent is rename the items folder name to the name of the module you want to create. Then rename the files from items-XX to modulename-XX and open all the files and change all mentions of "items" to "modulename"

  2. Don't forget the routing.

  • parentmodulename-routing.module.ts add a child as mentioned above
  • access the app-routing file , by going to the front end folder --> src --> app open app-routing.module.ts then add your newly added parentmodule as an entry to the routes array
const routes: Routes = [
  {
   path: 'dashboard',
   loadChildren: './dashboard/dashboard.module#DashboardModule'
 }
// NEW ROUTE HERE
  ,{
    path: 'parentmodulename',
    loadChildren: './parentmodulename/parentmodulename.module#ParentModuleNameModule'
  }
// THE REST OF THE FILE 
,
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: '**', redirectTo: 'dashboard' },
];

the last 2 children are the default paths if anyone types anything in the url that is invalid. As you see the redirectTo redirects to the dashboard (i.e the dashboard is the default module that gets loaded)

⚠️ **GitHub.com Fallback** ⚠️