Install Ng8CommonGenerator

npm install @ng8/common-generator --save

Import to project

import { Ng8CommonGeneratorModule } from '@ng8/common-generator'

@NgModule({
  declarations: [
    <!-- ... -->
  ],
  imports: [
    <!-- ... -->
    Ng8CommonGeneratorModule
  ],
  providers: [],
  bootstrap: []
})

Menu Item Component

Input:
  menuName
  menuUrl
Example:
  <ng8-common-generator-menu-item menuName="Home" menuUrl="#home"></ng8-common-generator-menu-item>

Header Component

- Inputs:
  + logoUrl
  + avatarUrl
  + userName
- We can use the header component and the menu item component to generate the profile menu list.
- Example:
    <ng8-common-generator-header logoUrl="logo url" avatarUrl="avatar url" userName="Steven Do">
      <ng8-common-generator-menu-item menuName="Settings" menuUrl="#settings"></ng8-common-generator-menu-item>
      <ng8-common-generator-menu-item menuName="Change password" menuUrl="#change-password"></ng8-common-generator-menu-item>
      <ng8-common-generator-menu-item menuName="Logout" menuUrl="#logout"></ng8-common-generator-menu-item>
    </ng8-common-generator-header>

Left SideBar Component

- Use the sidebar component and the menu item component to generate menu sidebar
- Example:
    <ng8-common-generator-left-sidebar>
      <ng8-common-generator-menu-item menuName="Home" menuUrl="#home"></ng8-common-generator-menu-item>
    </ng8-common-generator-left-sidebar>

Login Component

- Input:
  + signInUrl
- Example:
      <ng8-common-generator-login signInUrl="#login"></ng8-common-generator-login>

Footer Component

- We can write anything inside the "ng8-common-generator-footer" tag.
- Example:
    <ng8-common-generator-footer>
        <p>Here is the footer</p>
    </ng8-common-generator-footer>

Demo

https://github.com/dhqthai/app-demo-library