Template Name: Marvel - Angular 21 Admin Dashboard Template
Version: 2.0.0
Created On: 01 January 2021
Updated On: 15 January 2026
Author: Lettstart Design
Email: support@lettstartdesign.com
Marvel Angular Admin Dashboard is a modern, feature-rich, and highly scalable solution designed to simplify the development of powerful web applications. Built using Angular 21, SCSS, and TypeScript, this template delivers a perfect balance between performance, flexibility, and visual appeal. It is crafted specifically for developers, startups, agencies, and enterprises that need a reliable angular admin dashboard template to build robust backend systems quickly and efficiently.
In today’s digital ecosystem, admin dashboards are no longer just backend utilities—they are central systems that manage data, users, analytics, and business workflows. Whether you're developing a SaaS product, CRM system, analytics platform, or e-commerce backend, having a structured and user-friendly admin panel is essential. Marvel provides that strong foundation with a modern UI, reusable components, and a scalable architecture.
The template is designed with a modular approach, making it easy to customize and extend as your project grows. Its responsive design ensures seamless performance across desktops, tablets, and mobile devices. Marvel also includes multiple prebuilt dashboards, UI components, widgets, and functional modules that significantly reduce development time and effort.
With clean coding standards and well-organized structure, Marvel stands out as one of the best angular admin dashboard templates for developers who want to focus more on building features rather than designing interfaces from scratch. It is a complete solution that combines design, functionality, and scalability in a single package.
Marvel is developed using Angular 21, ensuring your project stays aligned with the latest framework advancements. This provides improved performance, better rendering, optimized dependency management, and long-term maintainability. Developers benefit from Angular’s powerful ecosystem, including component-based architecture and efficient state handling, which makes development faster and more structured.
Marvel is designed as a angular multipurpose admin dashboard that can be used across various industries and applications. Whether you are building a SaaS platform, CRM system, analytics dashboard, or e-commerce admin panel, the template adapts easily to your requirements. This flexibility eliminates the need to purchase or manage multiple templates for different projects.
The template is built with a clean and modular codebase that improves developer productivity. Reusable components, organized folders, and structured SCSS files make it easier to maintain and scale applications. This makes Marvel an ideal angular admin panel template for SaaS applications and enterprise-level systems.
Building an admin dashboard from scratch can take significant time and resources. Marvel reduces this effort by providing ready-to-use dashboards, pages, and UI components. Developers can focus on implementing business logic instead of designing UI elements, resulting in faster project delivery.
Marvel is fully responsive and optimized for all screen sizes. Whether accessed on desktop, tablet, or mobile, the dashboard maintains consistent design and functionality. This ensures a smooth user experience and makes it a reliable responsive angular admin dashboard with UI components.
Marvel helps reduce development costs by offering a complete and ready-made solution. Instead of investing heavily in custom UI development, businesses can use Marvel to accelerate their projects. It is especially beneficial for startups and agencies looking for a premium angular admin dashboard template for developers at an affordable cost.
Designed with Angular best practices, Marvel offers a clean, maintainable codebase and scalable structure— enabling developers to build, customize, and deploy Angular single page applications and Angular SPA templates faster and more efficiently.
Marvel includes clear, developer-focused documentation that makes it easy to customize Angular templates, Angular UI templates, Angular frontend templates, and Angular web app templates with confidence.
Thank you for choosing Marvel – Angular Admin Dashboard Template. Your support helps us continuously enhance our Angular Admin templates and Admin Dashboards with new features, design improvements, and performance optimizations. Have suggestions or feature requests? Contact our support team .
Marvel includes comprehensive documentation and dedicated support to help you customize Angular templates, Angular dashboard UI, Angular frontend templates, and Angular web app templates with confidence—whether you’re building a SaaS product or HTML website , landing pages , bootstrap website , portfolio website , or angular web apps .
Marvel is a multipurpose solution for building professional Angular dashboard for CRMS panels, back panels, apps, ecommerce dashboards, analytics dashboards, and modern admin dashboards. This premium collection of Angular dashboard includes multiple dashboard variations optimized for conversions, performance, and responsive design. Marvel also ships with essential apps such as Authentication, projects, tasks, calendar, and built-in UI & Advance components—making it ideal for complete Angular dashboard templates and Angular web app templates.
Marvel includes multiple prebuilt dashboards designed for real-world applications such as e-commerce, analytics, project management, and task tracking. These dashboards provide a ready foundation that developers can quickly customize according to their project requirements. This makes it a highly practical angular admin dashboard template with widgets and charts.
The multipurpose dashboard UI in Marvel is designed to handle different types of applications with ease. Whether you need a dashboard for SaaS metrics, CRM operations, analytics tracking, or administrative control, the layout is flexible and adaptable. This allows developers to reuse the same UI structure across multiple projects, making it a powerful angular modern admin dashboard solution.
Marvel includes a dedicated server statistics dashboard UI that helps monitor system performance and real-time metrics. It provides insights into CPU usage, memory consumption, traffic data, and uptime statistics. This feature is especially useful for SaaS platforms, DevOps tools, and enterprise systems that require continuous monitoring and performance tracking.
The template comes with a rich collection of UI components including forms, tables, buttons, modals, cards, and navigation elements. These components are reusable and customizable, ensuring design consistency across the application. This makes Marvel a complete angular dashboard UI kit for modern web applications.
Marvel offers interactive charts and data visualization tools that help users understand complex information easily. These charts are ideal for analytics dashboards, financial systems, and reporting tools. With real-time updates and dynamic visuals, Marvel becomes a strong solution for angular admin dashboard for ecommerce & CRM applications.
Security is an essential part of any admin panel, and Marvel includes prebuilt authentication pages such as login, registration, forgot password, and user profile management. These pages are ready to integrate, saving development time and ensuring secure implementation. This supports building an angular admin dashboard with authentication pages.
For e-commerce applications, Marvel provides features such as product management interfaces, order tracking dashboards, and sales analytics. These modules help businesses manage their operations efficiently while gaining valuable insights into performance and customer behavior.
Marvel includes a built-in chat system that enables real-time communication within the application. This feature is useful for customer support systems, team collaboration tools, and messaging platforms.
The integrated calendar and scheduling system allows users to manage events, deadlines, and tasks efficiently. This feature enhances productivity and makes the template suitable for project management applications.
Marvel is built with a modular architecture that allows developers to scale applications easily. Features can be added or removed without affecting the overall system, making it suitable for both small and large-scale projects.
The template uses SCSS for styling, providing better control over design and layout. Developers can easily customize colors, themes, and UI elements to match branding requirements.
Marvel is built with TypeScript, ensuring strong typing, improved debugging, and better maintainability. This results in cleaner and more reliable code for long-term projects.
The template follows Bootstrap-based design principles, making it easy to use and familiar for developers. This ensures consistency in UI development and makes it compatible with angular bootstrap admin dashboard templates.
Marvel includes a variety of widgets such as statistics cards, activity panels, and data summaries. These widgets enhance the functionality and visual appeal of the dashboard, making it one of the best bootstrap admin dashboard templates available.
The template is optimized for fast loading and smooth performance. Efficient rendering and clean code ensure a seamless user experience across all devices and platforms.
Marvel Angular Admin Dashboard is a complete and modern solution for building scalable admin interfaces with ease. Built with Angular 21, SCSS, and TypeScript, it offers a strong foundation for developing high-performance web applications.
Its versatility allows it to adapt to multiple use cases, including SaaS platforms, CRM systems, e-commerce dashboards, and analytics applications. Features like multipurpose dashboard UI, server statistics dashboard, and advanced data visualization make it a comprehensive and practical choice.
With its developer-friendly structure, responsive design, and rich feature set, Marvel helps reduce development time while maintaining high standards of design and usability. If you are looking for a reliable and future-ready angular admin dashboard template, Marvel provides everything needed to build efficient, scalable, and professional web applications.
Designed for flexibility, Marvel works seamlessly alongside Bootstrap admin dashboards , and also offers a Bootstrap-based alternative for teams exploring different frontend stacks: Marvel Bootstrap Admin Dashboard Template .
Getting started with Marvel – Multipurpose Angular Admin Dashboard Template & Angular 21 Admin Panel is fast, intuitive, and developer-friendly. Marvel is designed to help SaaS platforms, CRM systems, analytics tools, and enterprise applications build high-performance Angular admin dashboards and angular admin panel templates with minimal setup. Whether you’re creating angular admin dashboard templates, angular multipurpose admin dashboards, or angular enterprise applications, Marvel provides a modern workflow that allows you to launch projects quickly and efficiently.
Built with Angular 21, SCSS, and TypeScript, Marvel delivers a streamlined development experience for angular admin templates and angular dashboard UI kits. Each demo—ranging from analytics dashboards and CRM admin panels to eCommerce admin dashboards—is powered by modular components, reusable layouts, and clean architecture for easy customization. Optimized for performance, scalability, and responsiveness, Marvel ensures faster development, smoother workflows, and a superior developer experience when building modern angular admin dashboards, angular bootstrap admin dashboards, and enterprise admin panel applications.
npm install -g @angular/cli
cd [root] /
npm install --global npm@latest
To check weather is node succesfully install or not.
npm install --global yarn
To check weather is yarn succesfully install or not.
npm install
If vulnerabilities, run npm audit fix
npm start
In your root folder enter the following command to install the project dependencies:
npm install, this command will install all the template libraries inside the
node_modules folder.
npm install packagename, this command will install the package in node
modules.
Your Marvel Angular Admin Dashboard Template will now be available at http://localhost:4200.
Marvel includes live reload support, so any changes made to Angular components, dashboard layouts, admin UI templates, or SCSS styles and Angular Bootstrap components are instantly reflected in the browser—making it ideal for building and customizing angular admin dashboard templates, angular admin panels, and responsive angular dashboard applications.
File: app/layout/shared/topbar
<header id="page-topbar" class="topbar-header">
<div class="navbar-header">
<div class="left-bar">
<div class="navbar-brand-box">
<a routerLink="/" class="logo logo-dark">
</a>
<a routerLink="/" class="logo logo-light">
</a>
</div>
<button type="button" id="vertical-menu-btn" class="btn hamburg-icon" (click)="toggleMobileMenu($event)" (clickOutside)="hideSidebar()" [excludeBeforeClick]="true" [exclude]="'#vertical-menu-btn, .side-navbar'">
<i class="mdi mdi-menu"></i>
</button>
<!--desktop Search-->
<form class="app-search d-none d-lg-block">
</form>
<!--mega menu-->
<div ngbDropdown class="dropdown-mega d-none d-lg-block ms-2">
<a href="javascript:void(0)" ngbDropdownToggle class="btn header-item">
Mega Menu <i class="bx bx-chevron-down"></i>
</a>
<div class="dropdown-megamenu" ngbDropdownMenu>
<div class=""></div>
</div>
</div>
</div>
<!--right bar menu-->
<div class="right-bar">
<div class="d-inline-flex ms-0 ms-sm-2 d-lg-none" ngbDropdown>
<button ngbDropdownToggle aria-haspopup="true" type="button" id="page-header-search-dropdown"
aria-expanded="false" class="btn header-item notify-icon">
<i class="bx bx-search"></i>
</button>
<!--mobile Search-->
<div aria-labelledby="page-header-search-dropdown" class="dropdown-menu-lg dropdown-menu-right p-0"
ngbDropdownMenu>
<form class="p-3">
</form>
</div>
</div>
<!--langauge dropdown-->
<div class="d-inline-flex ms-0 ms-sm-2" ngbDropdown>
<button ngbDropdownToggle aria-haspopup="true" type="button" id="page-header-country-dropdown"
aria-expanded="false" class="btn header-item">
<img [src]="selectedLanguage?.flag" height="16">
</button>
<div aria-labelledby="page-header-country-dropdown" class="dropdown-menu-right" ngbDropdownMenu>
<a href="javascript:void(0);" ngbDropdownItem *ngFor="let item of languages; let i = index;" (click)="changeLanguage(i, item)">
<img [src]="item?.flag" [alt]="item?.country" height="12" class="mr-1" />
<span class="align-middle">{{item?.country}}</span>
</a>
</div>
</div>
<!--apps dropdown-->
<div class="d-none d-lg-inline-flex ms-2" ngbDropdown>
<button ngbDropdownToggle aria-haspopup="true" type="button" id="page-header-app-dropdown" aria-expanded="false"
class="btn header-item notify-icon">
<i class="bx bx-customize"></i>
</button>
<div aria-labelledby="page-header-app-dropdown" class="dropdown-menu-lg dropdown-menu-right" ngbDropdownMenu>
...
</div>
</div>
<!--request fullscreen-->
<div class="d-none d-lg-inline-flex ms-2">
<button type="button" data-toggle="fullscreen" class="btn header-item notify-icon"
(click)="requestFullscreen()">
<i [ngClass]="['bx', !isfullscreen ? 'bx-fullscreen' : 'bx-exit-fullscreen']"></i>
</button>
</div>
<!--notification dropdown-->
<div class="d-inline-flex ms-0 ms-sm-2" ngbDropdown>
<button ngbDropdownToggle aria-haspopup="true" type="button" id="page-header-notification-dropdown"
aria-expanded="false" class="btn header-item notify-icon position-relative">
<i class="bx bx-bell bx-tada"></i>
<span class="badge badge-danger badge-pill notify-icon-badge">3</span>
</button>
<div aria-labelledby="page-header-notification-dropdown" class="dropdown-menu-lg dropdown-menu-right p-0"
ngbDropdownMenu>
...
</div>
</div>
<!--profile dropdown-->
<div class="d-inline-flex ms-0 ms-sm-2" ngbDropdown>
<button ngbDropdownToggle aria-haspopup="true" type="button" id="page-header-profile-dropdown"
aria-expanded="false" class="btn header-item">
<img src="assets/images/users/avatar-1.jpg" alt="Header Avatar" class="avatar avatar-xs me-0">
<span class="d-none d-xl-inline-block ms-1">Henry</span>
<i class="bx bx-chevron-down d-none d-xl-inline-block"></i>
</button>
<div aria-labelledby="page-header-profile-dropdown" class="dropdown-menu-right" ngbDropdownMenu>
...
</div>
</div>
<!--layouts change-->
<div class="d-inline-flex">
<button type="button" class="btn header-item notify-icon right-bar-toggle" (click)="toggleRightSidebar()">
<i class="bx bx-cog bx-spin"></i>
</button>
</div>
</div>
</div>
</header>
File: app/layout/shared/menu
<div class="scroll-content" appSlimscroll>
<ul class="metismenu list-unstyled" id="side-menu" #sideMenu>
<ng-container *ngFor="let item of menuItems">
<!-- title -->
<li class="side-nav-title side-nav-item menu-title" *ngIf="item.isTitle">{{ item.label }}</li>
<!-- link -->
<li *ngIf="!item.isTitle">
<!-- link title with submenu -->
<a *ngIf="hasItems(item)" href="javascript:void(0);" class="side-nav-link">
<i [class]="item?.icon" *ngIf="item.icon"></i>
<span> {{ item?.label }}</span>
<span class="menu-arrow"></span>
</a>
<!-- link title -->
<a *ngIf="!hasItems(item)" [routerLink]="item?.link" class="side-nav-link">
<i [class]="item?.icon" *ngIf="item.icon"></i>
<span> {{ item?.label }}</span>
<span class="badge badge-{{item.badge.variant}} float-right" *ngIf="item?.badge">{{item?.badge?.text}}</span>
</a>
<!-- subment level 1 -->
<ul *ngIf="hasItems(item)" class="nav-second-level" aria-expanded="false">
<li *ngFor="let subitem of item?.subItems" class="side-nav-item">
<a *ngIf="hasItems(subitem)" href="javascript:void(0);" class="side-nav-link">
<i [class]="subitem?.icon" *ngIf="subitem?.icon"></i>
{{ subitem?.label }}
<span class="menu-arrow"></span>
</a>
<a [routerLink]="subitem?.link" *ngIf="!hasItems(subitem)" class="side-nav-link">
<i [class]="subitem?.icon" *ngIf="subitem?.icon"></i>
{{ subitem?.label }}
</a>
<ul *ngIf="hasItems(subitem)" class="nav-third-level" aria-expanded="false">
<li *ngFor="let subSubitem of subitem?.subItems">
<a [routerLink]="subSubitem?.link" class="side-nav-link">
<i [class]="subitem?.icon" *ngIf="subitem?.icon"></i>
{{ subSubitem.label }}
</a>
</li>
</ul>
</li>
</ul>
</li>
</ng-container>
</ul>
</div>
File: app/layout/shared/horizontal-topbar
<header id="page-topbar" class="topbar-header">
<div class="navbar-header">
<!-- left menus -->
<div class="left-bar">
<!-- logo -->
<div class="navbar-brand-box">
<a routerLink="/" class="logo logo-dark">
</a>
<a routerLink="/" class="logo logo-light">
</a>
</div>
<a class="navbar-toggle" [ngClass]="{'collapsed': collapsed}" href="javascript:void(0)" aria-expanded="false"
(click)="toggleMobileMenu($event)">
<span></span>
<span></span>
<span></span>
</a>
<!-- mega menu -->
<div ngbDropdown class="dropdown-mega d-none d-lg-block ms-2">
<a href="javascript:void(0)" ngbDropdownToggle class="btn header-item">
Mega Menu <i class="bx bx-chevron-down"></i>
</a>
<div ngbDropdownMenu class="dropdown-megamenu">
...
</div>
</div>
</div>
<!-- right menus -->
<div class="right-bar">
<!-- desktop search -->
<form class="app-search me-2 d-none d-lg-block">
...
</form>
<!-- mobile search -->
<div class="d-inline-flex ms-0 ms-sm-2 d-lg-none" ngbDropdown>
<button ngbDropdownToggle aria-haspopup="true" type="button" id="page-header-search-dropdown"
aria-expanded="false" class="btn header-item notify-icon">
<i class="bx bx-search"></i>
</button>
<div aria-labelledby="page-header-search-dropdown" class="dropdown-menu-lg dropdown-menu-right p-0"
ngbDropdownMenu>
<form class="p-3">
...
</form>
</div>
</div>
<!-- language dropdown -->
<div class="d-inline-flex ms-0 ms-sm-2" ngbDropdown>
<button ngbDropdownToggle aria-haspopup="true" type="button" id="page-header-country-dropdown"
aria-expanded="false" class="btn header-item">
<img [src]="selectedLanguage?.flag" class="mh-16" alt="USA">
<span class="ml-2 d-none d-sm-inline-block">{{ selectedLanguage?.shortCode }}</span>
</button>
<div aria-labelledby="page-header-country-dropdown" class="dropdown-menu-right" ngbDropdownMenu>
...
</div>
</div>
<!-- apps dropdown -->
<div class="d-none d-lg-inline-flex ms-2" ngbDropdown>
<button ngbDropdownToggle aria-haspopup="true" type="button" id="page-header-app-dropdown" aria-expanded="false"
class="btn header-item notify-icon">
<i class="bx bx-customize"></i>
</button>
<div aria-labelledby="page-header-app-dropdown" class="dropdown-menu-lg dropdown-menu-right" ngbDropdownMenu>
...
</div>
</div>
<!-- toggle fullscreen -->
<div class="d-none d-lg-inline-flex ms-2">
<button type="button" data-toggle="fullscreen" class="btn header-item notify-icon"
(click)="requestFullscreen()">
<i [ngClass]="['bx', !isfullscreen ? 'bx-fullscreen' : 'bx-exit-fullscreen']"></i>
</button>
</div>
<!-- notification dropdown -->
<div class="d-inline-flex ms-0 ms-sm-2" ngbDropdown>
<button ngbDropdownToggle aria-haspopup="true" type="button" id="page-header-notification-dropdown"
aria-expanded="false" class="btn header-item notify-icon position-relative">
<i class="bx bx-bell bx-tada"></i>
<span class="badge badge-danger badge-pill notify-icon-badge">3</span>
</button>
<div aria-labelledby="page-header-notification-dropdown" class="dropdown-menu-lg dropdown-menu-right p-0"
ngbDropdownMenu>
...
</div>
</div>
<!-- profile dropdown -->
<div class="d-inline-flex ms-0 ms-sm-2" ngbDropdown>
<button ngbDropdownToggle aria-haspopup="true" type="button" id="page-header-profile-dropdown"
aria-expanded="false" class="btn header-item">
<img src="assets/images/users/avatar-1.jpg" alt="Header Avatar" class="avatar avatar-xs me-0">
<span class="d-none d-xl-inline-block ms-1">Henry</span>
<i class="bx bx-chevron-down d-none d-xl-inline-block"></i>
</button>
<div aria-labelledby="page-header-profile-dropdown" class="dropdown-menu-right" ngbDropdownMenu>
...
</div>
</div>
<!-- change layout -->
<div class="d-inline-flex">
<button type="button" class="btn header-item notify-icon right-bar-toggle" (click)="toggleRightSidebar()">
<i class="bx bx-cog bx-spin"></i>
</button>
</div>
</div>
</div>
</header>
File: app/layout/shared/menu-horizontal
<ul id="side-menu" class="navbar-nav" #sideMenu>
<ng-container *ngFor="let item of menuItems">
<li class="side-nav-item">
<!-- not mega menu-->
<ng-container *ngIf="!item?.megaMenu">
<!-- link title without submenu -->
<a [routerLink]="item.link" *ngIf="!hasItems(item)" class="side-nav-link">
<i [class]="item.icon" *ngIf="item.icon"></i>
<span> {{ item.label }}</span>
</a>
<!-- link title with submenu -->
<a href="javascript:void(0);" class="side-nav-link" *ngIf="hasItems(item)">
<i [class]="item.icon" *ngIf="item.icon"></i>
<span> {{ item.label }}</span>
<span class="menu-arrow" *ngIf="hasItems(item)"></span>
</a>
<!-- level 1 sub menu -->
<ul *ngIf="hasItems(item)" class="nav-second-level" aria-expanded="false">
<li *ngFor="let subitem of item.subItems" [ngClass]="{'side-nav-item': hasItems(subitem)}">
<a [routerLink]="subitem.link" class="side-nav-link" *ngIf="!hasItems(subitem)" [attr.data-parent]="subitem.parentId">
<i [class]="subitem.icon" *ngIf="subitem.icon"></i>
<span> {{ subitem.label }}</span>
</a>
<a href="javascript:void(0);" class="side-nav-link" *ngIf="hasItems(subitem)">
<i [class]="subitem.icon" *ngIf="subitem.icon"></i>
<span> {{ subitem.label }}</span>
<span class="menu-arrow" *ngIf="hasItems(subitem)"></span>
</a>
<!-- level 2 sub menu -->
<ul *ngIf="hasItems(subitem)" class="nav-third-level" [ngClass]="{'side-nav-item': hasItems(subitem)}" aria-expanded="false">
<li *ngFor="let subSubitem of subitem.subItems">
<a [routerLink]="subSubitem.link" class="side-nav-link"
[attr.data-parent]="subSubitem.parentId">
{{ subSubitem.label }}
</a>
</li>
</ul>
</li>
</ul>
</ng-container>
<!-- mega menu -->
<ng-container *ngIf="item?.megaMenu">
<a href="javascript: void(0);" role="button">
<i [class]="item?.icon"></i>
{{item?.label}}
<i class="bx bx-chevron-down"></i>
</a>
<ul class="nav-second-level dropdown-mega-menu-xl dropdown-menu-right">
<li>
<div class="row">
<div class="col-md-4" *ngFor="let innerItem of item?.megaSubItems">
<a *ngFor="let innerSubItem of innerItem" [routerLink]="innerSubItem?.link">{{innerSubItem?.label}}</a>
</div>
</div>
</li>
</ul>
</ng-container>
</li>
</ng-container>
</ul>
File: src/layouts/layout.component.ts
// export layout related constants
export const LAYOUT_VERTICAL = 'vertical';
export const LAYOUT_HORIZONTAL = 'horizontal';
export const LAYOUT_WIDTH_FLUID = 'fluid';
export const LAYOUT_WIDTH_BOXED = 'boxed';
export const SIDEBAR_THEME_DEFAULT = 'vertical';
export const SIDEBAR_THEME_DARK = 'dark';
export const SIDEBAR_WIDTH_CONDENSED = 'condensed';
export const SIDEBAR_WIDTH_COMPACT = 'compact';
| Class | Description |
|---|---|
| sidebar-enable | Add class on body to reflect. This class used for mini sidebar |
| compact-side-menu | Add class on body to reflect. This class used for compact sidebar |
| left-side-menu-condensed boxed-layout | Add class on body to reflect. This class used for box layout |
| dark-sidebar-menu | Add class on body to reflect. This class used for dark sidebar |
| horizontal-navbar | Add class on body to reflect. Used for horizontal layout |
src -> assets is our public folder for public content like images, css, fonts etc.
File: src/partials/topbar.html
<div class="navbar-brand-box">
<a href="index.html" class="(logo || logo-dark)">
<span class="logo-lg">
<img src="assets/images/(logo || logo-light).png" alt="" height="30" />
</span>
<span class="logo-sm">
<img src="assets/images/(logo || logo-light).png" alt="" height="30">
</span>
</a>
</div>
File: src/partials/topbar-horizontal.html
<div class="navbar-brand-box">
<a href="index.html" class="(logo || logo-dark)">
<span class="logo-lg">
<img src="assets/images/(logo || logo-light).png" alt="" height="30" />
</span>
<span class="logo-sm">
<img src="assets/images/(logo || logo-light).png" alt="" height="30">
</span>
</a>
</div>
(logo || logo-dark) use class either logo or logo-dark as well as others.
we have used google fonts in our template. so, when you change the fonts of the theme go tho the assets -> scss -> custom -> fonts folder and open _fonts.scss file. In that file use your own font. After this change fonts in assets -> scss -> variable.scss file
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700,800,900&display=swap');
$font-family-sans-serif: 'Nunito Sans', sans-serif;
Use can also insert font in index.html
<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700,800,900&display=swap"
rel="stylesheet"
/>
File service configuration is service file used to export files like excel, pdf.
How to use it?
<button class="btn btn-info" (click)="exportData('table')">
<i class="mdi mdi-file-excel me-1"></i> Export
</button>
<button class="btn btn-info" (click)="exportPDFData('table.pdf')">
<i class="mdi mdi-file-pdf me-1"></i> Pdf
</button>
exportData(excelFileName){
exportAsExcelFile(json: any[], excelFileName: string);
}
exportPDFData(filename){
createPDFContent(headers:string[], body:Array<any>)
}
exportAsExcelFile(json: any[], excelFileName: string) used to export excel file.
It takes two parameters, JSON and ExcelFilename.
JSON file is excel data
ExcelFilename is download file name
File service configuration is service file used to filter data. It includes searching of content, filter of table.
How to use it?
<th class="sort-column" sortable="name" (sort)="onSort($event)">Name</th>
<th class="sort-column" sortable="position" (sort)="onSort($event)">Position</th>
<th class="sort-column" sortable="office" (sort)="onSort($event)">Office</th>
filterService.searchList = data;
this.advanceTableData$ = filterService.filterData$.asObservable();
this.loading$ = filterService.loading$.asObservable();
this.filterService.criteriaFilter = ["name", "position", "office"];
onSort($event) is an event emit by sortable directive. It emits the column name.
Based on column filter service filter the service and return data back to component and
component reflect the data to UI
searchList its searching data.
criteriaFilter its criteria on which field you want to filter.
$blue: #3051d3;
$indigo: #564ab1;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #ff5c75;
$orange: #f77e53;
$yellow: #ffbe0b;
$green: #43d39e;
$teal: #1ce1ac;
$cyan: #25c2e3;
We are committed to our customers and support is at up most priority. If you have any question, issue with Marvel, please feel free to contact us via email support@lettstartdesign.com or generate ticket on our portal.
Explore Marvel Angular Admin Template on LettStartDesign – premium landing pages, HTML templates, admin dashboards, website templates, Angular templates, React templates, and portfolio templates.