When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.
Welcome to Angular! Angular helps you build modern applications for the web, mobile, or desktop.
For getting started an Angular application you needs two things as Prerequisites.
npm install -g @angular/cli
ng new my-app
cd my-app
ng serve
npm install -g @angular/cli
cd theme
npm install
ng serve
ng build
If you want rtl layout add this predefine class to the body tag and also added dir="rtl" in html tag.
<!-- Add class rtl in body tag -->
<body class="rtl">
If you want dark layout add this predefine class to the body tag only.
<!-- Add class dark in body tag -->
<body class="dark">
Skeleton screen is a low fidelity UI into which information is gradually loaded. It gives users a visual cue that the content is being loaded into each UI element.
Skeleton Screen when used as the feature in the product make people perceive that app/website is loading fast. Improved perceived performance not only provide good UX but also helps in increasing conversion ratio.
there is a loader section in starting of html pages. you can remove it by just delete that section.
<!-- loader start -->
<div class="skeleton_loader">
...
</div>
<!-- loader end -->
If you use image as background than add class ".bg-img" in image and add below class in parent.
<div style="position: absolute; z-index: -1; inset: 0px; overflow: hidden; background-size: cover; background-color: transparent; background-repeat: no-repeat; background-position: 0% 50%; background-image: none;">
<video autoplay="" loop="" muted="" style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 0%; transform: translate(0%, -50%); visibility: visible; opacity: 1; width: 1849px; height: auto;">
<source src="assets/video/plane.mp4" type="video/mp4">
</video>
</div>
Rica have used 2 maps which is google map & leaflet map following are the maps which used for map box.
Google Map
npm install @angular/google-maps
Inside your HTMl File
<div class="map" id="map">
<google-map [options]="mapOptions" style="width: 100%; height: 100%;"></google-map>
</div>
Inside your TS File
public mapOptions: google.maps.MapOptions = {
center: { lat: 20.5937, lng: 78.9629 },
zoom: 5
};
Leaflet Map
npm i @bluehalo/ngx-leaflet
npm install @types/leaflet
npm install leaflet
Inside your HTMl File
<div class="map" id="mapid">
<div style="height: 100%; z-index: 0;" leaflet [leafletOptions]="options" </div>
</div>
Inside your TS File
public options: L.MapOptions = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '...',
}),
],
zoom: 12,
center: L.latLng(20.5937, 78.9629),
};
If you remove RTL setting button, please remove the code from src/app/shared/components/ui/customizer
Inside your HTMl File
<div class="theme-setting">
<div class="dark">
<input class="tgl tgl-skewed" id="dark" type="checkbox" (change)="changeThemeColor(themeColor)" [(ngModel)]="themeColor">
<label class="tgl-btn" [attr.data-tg-off]="!themeColor ? 'Dark' : 'Light'"
[attr.data-tg-on]="themeColor ? 'Light' : 'Dark'" for="dark"></label>
</div>
<div class="rtl">
<input class="tgl tgl-skewed" id="rtl" type="checkbox" (change)="changedDirection(themeDirection)" [(ngModel)]="themeDirection">
<label class="tgl-btn" [attr.data-tg-off]="!themeDirection ? 'RTL' : 'LTR'"
[attr.data-tg-on]="themeDirection ? 'LTR' : 'RTL'" for="rtl"></label>
</div>
</div>
Inside your TS File
public themeColor: boolean = false;
public themeDirection: boolean = false;
constructor(){
let layout_version = localStorage.getItem('layout_version');
let layout_type = localStorage.getItem("layout_type");
if(layout_version == 'dark-layout'){
this.themeColor = true;
document.body.classList.add('dark');
localStorage.setItem('layout_version', 'dark-layout')
}else{
this.themeColor = false;
document.body.classList.remove('dark');
localStorage.setItem('layout_version', '')
}
if(layout_type == 'rtl'){
this.themeDirection = true;
document.getElementsByTagName('html')[0].setAttribute('dir', 'rtl');
document.body.classList.add('rtl');
localStorage.setItem('layout_type', 'rtl')
}else{
this.themeDirection = false;
document.getElementsByTagName('html')[0].removeAttribute('dir');
document.body.classList.remove('rtl');
localStorage.setItem('layout_type', '')
}
}
changeThemeColor(color: boolean) {
if (color == true) {
document.body.classList.add('dark');
localStorage.setItem('layout_version', 'dark-layout')
} else {
document.body.classList.remove('dark');
localStorage.setItem('layout_version', '')
}
}
changedDirection(direction: boolean) {
if (direction == true) {
document.getElementsByTagName('html')[0].setAttribute('dir', 'rtl');
document.body.classList.add('rtl');
localStorage.setItem('layout_type', 'rtl')
} else {
document.getElementsByTagName('html')[0].removeAttribute('dir');
document.body.classList.remove('rtl');
localStorage.setItem('layout_type', '')
}
}
without this plugins and products, our theme will be incomplete.