Documentation | Dexam angular bootstrap 4 Landing template

Getting Started

Make sure you have Nodejs, NPM and @angular/cli installed on your computer.

Download node https://nodejs.org/en/download

Open terminal and run npm install -g @angular/cli

Angular CLI Doc: https://cli.angular.io

Serve and build

Use terminal and navigate to project root.

Then run npm install

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200. The app will automatically reload if you change any of the source files.

Code Scaffolding

Run ng generate component componentName to generate a new component. You can also use ng generate directive/pipe/service/class/module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

App Entry Point

main.ts (Location: src) is the entry file. And app.scss (Location: "src/assets/styles/app.scss") is the entry file for Styles which is included in angular.json file.

Route Configuration

There are two main router-outlets in AuthLayoutComponent and LandingLayoutComponent (Location: src/app/shared/components/layouts). AuthLayoutComponent renders sessions view (Location: src/app/views/sessions) and LandingLayoutComponent renders all views except sessions view.

Each directory in src/app/views is a module. And those modules are lazy loaded which is configured in app-routing.module.ts (Location: src/app). And also each modules has it's own routing file defines it's child routes.

Theming Guide

custom theme included.

lite

Create Your Own Theme

Theme scss files are located in src/assets/styles/themes

Open _custom.scss (Location: src/assets/styles/themes/lite/_custom.scss) and and change the color variables.

Then Import the _custom.scss file into _themes.scss file.

Change The Main Background color

To change the background color Using css class,such as to change the background of the v1 layout you need to add the css class in the main wrap div of the landing-v1.component.html file or you can use the ngClass .for this you need to assign the class name in landing-v1.component.ts file "backgroundColor" property.


                       
    <div class="landing_wrap landing-gradient-blue-red" [ngClass]="[backgroundColor]" > 

    <app-header > 

    </app-header > 

    <app-intro1 > </app-intro1 > 

    <app-features > </app-features > 

    <app-services > </app-services > 

    <app-works-carousel > </app-works-carousel > 

    <app-best > </app-best > 

    <app-left-image > </app-left-image > 

    <app-right-image > </app-right-image > 

    <app-pricing-one > </app-pricing-one > 

    <app-team > </app-team > 

    <app-testimonial > </app-testimonial > 

    <app-news-two > </app-news-two > 

    <app-faqs > </app-faqs > 

    <app-contact-form > </app-contact-form > 


</div >