Unice Angular Theme

Welcome to Unice Angular 20!

We are pleased that you have chosen Unice Angular theme for your site and we will not disappoint you with your choice. Unice is an excellent theme develop with SEO friendly structure and Without Jquery. The code written is a clean and well structured.

Unice is the most powerful & responsive theme with all the modules and functions involved with an attractive design.

Unice Angular theme template is build focusing on Angular 20, ngbootstrap, HTML5, CSS3, scss and many more..

Unice theme presents total 12 layouts and lots of inner pages.

We request to have a look at our Unice manual to know brief about the theme! We have compromised each and every detail for you in the manual that you will need.

If we are unable to answer your queries beyond our documentation, you are free to contact us through the themeforest support page with your site. We will be happy to cater you and will get back to you in no time.

Read the manual before jumping to start!

Getting started

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.

Prerequisites

Before you begin, make sure your development environment includes Node and an npm package manager.

Node.js

Download latest stable version of node.js i.e. 20.19.0 from nodejs.org.

  • Install Node.js using downloaded file
  • To check your node version, run node -v in a terminal/console window.
    • Npm package manager

    Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager. This Quick Start uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window.

    For better understanding angular we suggest you to once go through official documentation of an Angular from angular.dev

    Angular setup

    Installing Angular CLI

    You use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

    Install the Angular CLI globally.

    To install the CLI using npm, open a terminal/console window and enter the following command:

    npm install -g @angular/cli

    Unice setup

    If you have already download and install node.js and Angular CLI then ignore prerequisites accordingly.

    Prerequisites
    Node.js

    Download stable version of node.js from nodejs.org.

  • Install Node.js using downloaded file
  • To check your node version, run node -v in a terminal/console window.
    • Angular CLI

    Install Angular CLI Using: 

    npm install -g @angular/cli
    Setup an Unice theme by
    • 1) Download and extract an Unice themes from themeforest
    • 2) Extract it and then go in to particular folder in which theme is there. 
      • cd  theme-folder
    • 3) Import all dependency by installing npm command
      • npm install
    • 4) Now you are in stage to successfully run Unice using below command:
      • ng serve

    Common issue

    A common issue which user face during setup
    • 1) If you had not doing "npm i" command for installing all depencies and directly run "ng serve" command you may have following error
      • Solution: 
      npm install
    • 2) when running command using "ng serve" you may get sass error as below:
      • Solution: 
      npm install node-sass --save-dev
    • 2) Some times you also may get below error when running "ng serve"
      • Solution: 
      sudo npm cache clean

    Folder Structured

    Here we represent Angular Folder Structure and Style Customize

    • Unice
      • public
        • assets
          • audio
          • css
          • data
          • fonts
          • i18n
          • images
          • scss
          • svg
          • .gitkeep
        • favicon.ico
      • src
        • app
          • blog
          • elements
          • features
          • landing
          • layouts
          • pages
          • portfolio
          • shared
          • shop
          • app.html
          • app.scss
          • app.ts
          • app.config.ts
          • app.routes.ts
        • index.html
        • main.ts
        • style.scss
      • angular.json
      • package.json
      • tsconfig.json

    Demo Staterkit

    We have full demo theme which is full-theme.zip. But if you want specific layout er have simplify your work by making demo stater kit which you can use as their name folder zip wise.

    Please follow insruction if you need inner pages in your demo:
    • Copy particular inner pages from main theme with their module and routing for example

      Suppose you want to add blog in your theme then you need to copy complete blog folder from main theme and paste it in your stater in same path as in main theme

    • Now if you want to use only single blog page from our multiple layout then you just need to remove all other folder as well as import statement of that blog layout from blog.module as well as blog-routing.module except blog layout which you want.
    • For importing that blog module in your layout you have to import that module in app.module and accordingly for routing that module you have to add it in app-routing.module (For that also you can refer main theme app.module and app.route file)
    • You can do this same process for any of inner pages which you want from main theme
    • Now it's a time a time to run your project by doing ng serve

    SCSS and CSS Structure

    We have build complete theme in scss so as end user select particular layout they have to change in below file:

    Now as per our needed layout we are dynamically add that particular css

    e.x : For Wedding layout we need color-11 so in wedding.ts we are calling one service which is colorScssservice and pass a particular color which we need for that particular layout and that service will add that css to that layout.

    Customization

    logo

    In particularLayout-nav.html you can find that particular layout logo and from their you can replace layout logo with your brand logo.

    <img src="assets/images/icon/logo.png" class="img-fluid" alt="">
     
    <img src="assets/images/logo/1.png" alt="" class="img-fluid footer-logo">

    Menu

    Horizontal Menu

    You can get horizontal menu from shared -> components -> navigation -> menu. export that components from shared module and use it using selector where you want to use that horizontal menu.

    Center Logo menu

    You can also get center menu from shared -> components -> navigation -> center-menu. export that components from shared module and use it using selector where you want to use that center logo menu.

    For Mobile Responsive it emable using toggle bar in responsive screen

    How to Get Product

    Located in /shared/services/e-commerce/products.services.ts file.

    private products(): Observable {
                         return this.http.get('assets/data/e-commerce/products.json').map((res:any) => res.json())
                     }
    <!-- Sample json data -->
    
                        [{
                        "id": 1,
                        "name": "matte black bottle",
                        "price": 100,
                        "salePrice": 200,
                        "discount": 50,
                        "img": "assets/images/fashion/product/1.jpg",
                        "shortDetails": "Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium",
                        "description": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. ",
                        "stock": 5,
                        "new": true,
                        "sale": true,
                        "category": "women",
                        "colors": ["yellow", "gray", "green"],
                        "size": ["1L", "2L", "3L"],
                        "tags": ["nike", "caprese", "lifestyle"],
                        "variants": [
                        {
                            "color": "yellow",
                            "images": "assets/images/fashion/product/1.jpg"
                        },
                        {
                            "color": "gray",
                            "images": "assets/images/fashion/product/2.jpg"
                        },
                        {
                            "color": "green",
                            "images": "assets/images/fashion/product/3.jpg"
                        }]
                    }]

    Change Stripe Key

    Located in /e-commerce/product/widget/checkout/checkout.ts file.

     stripeCheckout() {
              var handler = (window).StripeCheckout.configure({
                key: 'your_publishable_key', // publishble key
                locale: 'auto',
                token: (token: any) => {
                // You can access the token ID with `token.id`.
                // Get the token ID to your server-side code for use.
                this.orderService.createOrder(this.checkOutItems, this.checkoutForm.value, token.id, this.amount);
            }
        });
        handler.open({
        name: 'Unice',
        description: 'Online Fashion Store',
        amount: this.amount * 100
    }) 
}

    Change Paypal Key

    Located in /e-commerce/product/widget/checkout/checkout.ts file.

      private initConfig(): void {
              this.payPalConfig = new PayPalConfig(PayPalIntegrationType.ClientSideREST, PayPalEnvironment.Sandbox, {
              commit: true,
              client: {
              sandbox: 'YOUR_CLIENT_ID', // client Id
          },
                button: {
                label: 'paypal',
                size:  'small',    // small | medium | large | responsive
                shape: 'rect',     // pill | rect
                //color: 'blue',     // gold | blue | silver | black
                //tagline: false  
            },
                onPaymentComplete: (data, actions) => {
            this.orderService.createOrder(this.checkOutItems, this.checkoutForm.value, data.orderID, this.amount);
                },
                onCancel: (data, actions) => {
                console.log('OnCancel');
                },
                onError: (err) => {
                console.log('OnError');
                },
                transactions: [{
                amount: {
                currency: 'USD',
                total: this.amount
                }
                }]
                });
                }

    For Inner Pages

    Dark & RTL

    Unice Angular come with two new features
    • Dark
    • RTL

    • Demo Stater

      If you are use Demo stater project and you want Dark or RTL layout then you just need to add dark and rtl class accordingly in body tag.

      Dark:

      If you want to use dark then you just need to add <body class="dark"> in index.html at src root.

      RTL:

      If you want to use RTL then you just need to add <body class="rtl"> in index.html at src root.

    • Main Theme

      We have make one config file in main theme called shared >> data >> config.ts from where you can pass your default conflict like you want LTR or RTL and Dark or Light layout.

      That you can set from that config.ts

    • Remove Dark and RTL from theme
      • 1) Remove customizer.service.ts from shared >> service >> customizer.service.ts
      • 2) Remove HTML and related ts code from app.html & app.ts

      • For more refer below image

        data data

    Dependencies

    Thank you

    Once again thank you for purchasing one of our Templates , if you like our Templates please rate us

    Best Regards, Pixelstrap