Top

Loader


Sometimes content on the page take time to load, because of which the user might see the content with improper design. To avoid that we could show the loader untill the content is loaded properly.

Below is our code for showing loader for 3 seconds on intial page load. This code is in the file app.vue, you can find this file on this path: src >> app >> shared >> components >> loader folder

// loader.components.html //
<!-- Loader starts-->
<div class="loader-wrapper" [class.loderhide]="!show">
<div class="loader">
</div>
</div>
<!-- Loader Ends-->
                    

correspondingly remove methods of useEffect from script tag in loader.jsx

// loader.components.ts //

import { Component } from '@angular/core';

@Component({
selector: 'app-loader',
templateUrl: './loader.component.html',
styleUrls: ['./loader.component.scss']
})

export class LoaderComponent {

public show: boolean = true;

constructor() {
setTimeout(() => {
this.show = false;  
}, 3000);
}

}

                      

We have added the loader div and given the animation in its scss file

Toggle Loader

To show and hide the loader we toggle loaderhide class through show variable. Style for the loaderhide class has been define below, it toggles display of the div between none and visible. Initially we have kept show to true, but when the component is mounted we run a function which call the settimeout function. settimeout functions overwrites the value of show variable to false after 3 second.

If you want to make changes in the animation or the design of the loader, you can navigate to src >> assets >> scss >> components >> _loader.scss. Here default styles and animation has been given, make changes as per your needs.

You can modify the timing of the loader by changing the time in setTimeout function. Instead of 3000ms you can set any time as per your needs.

Routing

One of the most important things while creating an Angular project is creating routes. Without routes you cannot render any page in the browser.

In this page we will learn how to create routes for our pages.

When creating angular project make sure that you select routing to setup router by default.

Defining Module routes

app-routing.module.ts file will be created automatically, here we can define our paths for each module.

But when we are working on a large projects, such as Yuri, number of paths will grow very fast, so we create a separate file routes.ts in routes folder to keep our routes more organized.

Import that component in Routes.ts


import { Routes } from "@angular/router";
import { SamplePageComponent } from "src/app/components/sample-page/sample-page/sample-page.component";

export const content: Routes = [
{
  path: 'sample-page',
  component :SamplePageComponent,
  data: {
      title: "Sample Page",
      breadcrumb: "Sample Page",
    },
},
{
  path: 'pages',
  loadChildren: () => import('../../components/sample-page/sample-page-routing.module').then(m => m.SamplePageRoutingModule),
  data: {
      title: "Sample Page",
      breadcrumb: "Sample Page",
  }
},

]
                  

We give the path for our module, and in loadChildren function we provide our module .

And then we will import this routes.ts file in our app-routing.module.ts file.

App-routing.module.ts

import { content } from "./shared/routes/routes";

const routes: Routes = [
...,
{
path: '',
component: ContentComponent,
children: content
},
];

@NgModule({
imports: [RouterModule.forRoot(routes, {
})],
],
exports: [RouterModule]
})
export class AppRoutingModule { }
                  

Now We are done setting our modules path, but when we create a component inside a Module then path for those components are written in module_name-routing.module.ts file. Please refer to Our Create New Page Guide to see how paths for the components are given.

Customize or Replace Menu Sidebar

There are Numerous links in sidebar and if we write whole code in html then number of lines will increase by a lot. So to prevent that we have created a service file for the sidebar links so that we can loop through the array links that we have made in this service file and render our links accordingly.

You can find nav.service.ts on the following path:

src > app > shared > services > nav.service.ts
Making changes in sidebar.

If you require to make any changes in the sidebar, you could follow the given instructions.

To add links in sidebar:

If you need to add or remove links in the sidebar, all you need to do is make changes in the nav.service.ts file.

For Example:

Lets say we want to change the previous sidebar to the new sidebar.

To achieve this we can add new object in nav.service.ts, where we want to add the new link. Here we want to add new link in between Dashboard and widget links so we will make the following changes.

In nav.services.ts

 {
      level: 1,
      title: "Dashboard",
      icon: "home",
      type: "sub",
      badgeType: "light-primary",
      badgeValue: "3",
      active: true,
      children: [
        { path: "/dashboard/default", title: "Default", type: "link" },
        { path: "/dashboard/ecommerce", title: "Ecommerce", type: "link" },
        { path: "/dashboard/project", title: "Project", type: "link" },
      ],
    },
    {
      level: 1,
      title: "Widgets",
      icon: "widget",
      type: "sub",
      active: false,
      children: [
        { path: "/widgets/general", title: "General", type: "link" },
        { path: "/widgets/chart", title: "Chart", type: "link" },
      ],
    },
                  

As you can see above, you will need add data in the predefined format. Title key will contain the text you need to display for the link. In the path key, you will need to add the path that you define in the router.

You can add icons before the link in ui by giving feather icon name in icon key. Here is the link for the feather icon you might want to you. https://feathericons.com/. Copy the name of the icon you want to show and paste it in before icon key.

If the link contains sub links add type : 'sub', and if there are no sub links , just add type: 'link'

For Example: If you want to add a link without any sublinks then add the following code.

In nav.services.ts

   {
      level: 1,
      path: "/file-manager",
      title: "File Manager",
      icon: "file",
      type: "link",
    },
                  

Note:Make sure that the path you enter in the json is same as the one that you have given in the router, or else error will be thrown as same path will not be found.

If you want to remove links from the sidebar:

As we added code in the above section to add new links in the sidebar. You simply need to remove the whole object to make it disappear from the sidebar.

For Example: We added the following code in the menu,json file. If we want to remove the same then we will remove the object in the array of links in nav.service.ts.

In nav.services.ts

{
title: 'New Link', icon: 'git-pull-request', type: 'sub', active: false, 
children: [
  { 
      path:'/newLink/subLink1', 
      title:'New Sub Link 1', 
      type: 'link' 
  },
  { 
      path:'/newLink/subLink1',
      title:'New Sub Link2',
      type: 'link' 
  }
]
},
                  

Style customization

Suppose you want to customize color and font as per your project then you can change it by:

Theme Color
    Now we are come with unlimited color option so suppose you want to customize your theme primary and secondary color then just select color from customizer see in right side select color as per your choice and then click on apply button, it will refresh your page and now you will get color as per your choice, now if you want to add this color parmenently in your project
  • just copy your color code from above config and update in /src/assets/scss/style.scss
Variable customization of complete theme

Suppose you want to change color and size of card-body, Alert, Badge, Form input, breadcrumb,buttons, footer, sidebar and many more then you just need to change that particular color from _variable.scss in assets >> scss >> theme >> utils >> _variable.scss

Google Font

You can change font of your theme from index.html in public folder

  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&amp;family=Nunito+Sans:ital,wght@0,300;0,400;0,700;0,800;0,900;1,700&amp;display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet">

Theme Customize

Layouts

We have provided a bunch of page layouts and menu layouts that can be implemented with just a options change to body!

For creating your dream layout open customizer by click on setting icon

You can change your theme by clicking particular setting

Then you just need to click on configuration button

Configuration popup will be open then just click on copy json button which will copy configuration of theme which you want

Now go to our theme >> src >> app >> shared >> services >> layout >> layout.service.ts and then just replace complete layout.service.ts with your new configuration and re-run theme using ng serve.


public config = {
    settings: {
      layout_type: 'ltr',
      layout_version: 'dark-sidebar',
      sidebar_type: 'compact-wrapper',
    },
    color: {
      primary_color: '#009DB5',
      secondary_color: '#F94C8E',
    },
  };

As we have given amazing layouts by adding them in URL so you just need to add your choice name layout in URL and you have that with you

Layout Options
Boxed Layout Class: box-layout
RTL Layout Class: rtl
Light Layout Class: light
Dark Sidebar Class: dark-sidebar
Dark Layout Class: dark-only
Theme options

We have some inbuilt themes for sidebar that can be switched with just a class change

Sidebar Options
Horizontal Sidebar type Class: "page-wrapper horizontal-wrapper"
Compact Sidebar Attribute: sidebar-layout="page-wrapper compact-wrapper"

RTL

Suppose you want to add RTL in your application then you just need to set "layout_type" as RTL so application will be converted in RTL layout.

Suppose you want to change Colors from config.jsx then you have to first clear localStorage then you will get your color in theme.

public config = {
settings: { 
  layout: '',
  layout_type: 'rtl',
  layout_version: 'dark-sidebar',
  sidebar_type: 'compact-wrapper',
},
color: {
  primary_color: '#009DB5', 
  secondary_color: '#F94C8E'
}
}