Quick Start

What will be covered in QS? The Quick Start section will guide you through the essential steps to set up and start working with the TCB frontend project.

It covers:

• Creating a new project using Angular.

• Setting up authentication to access Tradinos packages.

• Downloading the required packages and dependencies.

• Starting with coding to quickly build and see results in action.

By the end of this section, you’ll have a functional development setup and a working example to get started with ease.

1- Make sure that you have applied the steps in the intro:

INTRO

In this section, we will cover how to code like the image below, the main component we are going to use :

• AppContainerComponent

• NavContainerComponent

• NavigationMenuComponent

• ToolbarComponent

• ThemeSwitcherComponent

2-Now let's start with code

app.config.ts

import { AppSharedModule, LIB_LAYOUT_CONFIG } from '@tradinos/cms-frontend-layout';

{
  provide: LIB_LAYOUT_CONFIG,
  useValue: {
    themeConfig: {
      availableThemes: [
        {
          name:'lara-light',
          extension: 'css',

        },
        {
          name: 'lara-dark',
          extension: 'css',
        },
      ],
      defaultTheme: {
        name: 'lara-light',
        extension: 'css',
      },
 
    },
    logoConfig: {
      darkLogoPath: 'assets/images/dark-logo.png',
      lightLogoPath: 'assets/images/light-logo.png',
    },
  },
},
importProvidersFrom([
  AppSharedModule,
]),

And you need to update your angular.json file to apply the style in your app :

//If you want to use another theme, you need to replace it with "lara" theme 
"styles": [
    "src/styles.scss",
    {
      "input": "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
      "bundleName": "lara-light",
      "inject": false
    },
    {
      "input": "node_modules/primeng/resources/themes/lara-dark-blue/theme.css",
      "bundleName": "lara-dark",
      "inject": false
    }
]

Do not forget to add prime theme in your index.html file:

 <link id="app-theme" rel="stylesheet" type="text/css" href="lara-light.css">

3- AppContainerComponent:

1. Import the component in your app component :

import { AppContainerComponent } from '@tradinos/cms-frontend-layout';

1. The selector for component, like it :

<lib-app-container>
   <router-outlet slot="appContent">
</lib-app-container>

For more details, you can go to the component page:

App Container Component

4- NavContainerComponent

1. Import the component :

import { NavContainerComponent} from '@tradinos/cms-frontend-layout';

1. The selector for component, like it :

<lib-navbar>
</lib-navbar>

For more details, you can go to the component page:

Nav Container Component

5- NavigationMenuComponent

1. Import the component :

import { NavigationMenuComponent} from '@tradinos/cms-frontend-layout';

1. The selector for component, like it :

<lib-cms-navigation-menu>
</lib-cms-navigation-menu>

For example :

html

<lib-cms-navigation-menu
  [showlogo]="true"
  [expanded]="true"
  [routePrefix]="'/admin'"
  [navigationItems]="menuItems">
</lib-cms-navigation-menu>

typescript

menuItems: NavigationItem[] = [
  { route: '/dashboard', title: 'Dashboard' },
  {
    route: '/products',
    title: 'Products',
    children: [
      { route: '/products/electronics', title: 'Electronics' },
      { route: '/products/clothing', title: 'Clothing' },
    ],
  },
  { route: '/profile', title: 'Profile' },
];

For more details, you can go to the component page:

Nav Menu Component

6- ToolbarComponent

1. Import the component :

import { ToolbarComponent} from '@tradinos/cms-frontend-layout';

1. The selector for component , like it :

<lib-toolbar slot="topContent">
</lib-toolbar>

For more details, you can go to the component page:

ToolBar Component

7- ThemeSwitcherComponent

1. Import the component :

import { ThemeSwitcherComponent } from '@tradinos/cms-frontend-layout';

1. The selector for component, like it :

<lib-theme-switcher>
</lib-theme-switcher>

themeConfig: { 
  availableThemes: [  // add your own theme
    {
      name: 'lara-light', // add your name 
      extension: 'css', // add your extension can be css or scss 
    },
    {
      name: 'lara-dark',
      extension: 'css',
    },
  ],
  defaultTheme: { // chose your default theme 
    name: 'lara-light',
    extension: 'css',
  },
}

For more details, you can go to the component page:

Theme Switcher Component