Unice Angular Theme

Welcome to Unice Angular 10!

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 10, ngbootstrap, HTML5, CSS3, scss and many more..

Unice theme presents total 13 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!

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 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.
  • 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.io

    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
                                  

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

    Prerequisites
    Node.js

    Download latest 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
                                    
    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 

    Here we represent Angular Folder Structure and Style Customize

    • Unice Admin
      • e2e
      • node_modules
      • src
        • app
          • blog
          • elements
          • features
          • landing
          • layouts
          • pages
          • portfolio
          • shared
          • shop
          • app-component.ts
          • app.component.html
          • app-routing.module.ts
          • app.component.scss
          • app.module.ts
        • Assets
          • Css
          • Fonts
          • Images
          • Json
          • Scss
          • Video
        • environments
          • environment.ts
        • fevicon.ico
        • index.html
        • main.ts
        • polyfills.ts
        • style.css
      • angular.json
      • package.json
      • tsconfig.json

    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.component.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.

    logo

    In particularLayout-nav.components.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">

    fonts

    <!--Google font-->
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">

    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.component.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.component.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

    What is Angular Universal?

    • In a simple term, Angular Universal is a Pre-Rendering solution for Angular.
    • Our normal angular application completely run in a client browser that's why it take a time to load a complete iteractive application
    • But for making a good site with User & SEO friendly Angular Universal comes in picture. By doing angular universal user can take rest from their main queries that means from loading a data faster and make a complete site SEO friendly.

    Advantage of Angular Universal?

    • Performance
    • Search Engine Optimization (SEO)
    • Social Media Crawlers

    For Implementing SSR in your existing project run a command:

    • ng add @nguniversal/express-engine --clientProject <name of your client project>
    • You will notice that the following files being created or modified after this command.

    For building our application in production enviornments:

    • Now we need to do 2 builds on your existing angular application and the newly created ssr application using it.
    • npm run build:ssr && npm run serve:ssr

    How to add Dynamic Title and Meta Data for making our site SEO-Friendly?

    • Import title and meta service and set SEO title and meta description according to your need. you can simply pass static string also./li>

    Dynamic Tag

    • If you want to add title and description dynamically as describe in above screenshot then lets and data attribute in your routs:

    How to remove Title and Metadata?

    • Just do reverse process of above for removing Title and Meta tags

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

    Best Regards, Pixelstrap