⬅ Back to Home

Angular 18 Customization Documentation

Project Structure Documentation

1. Customizing Themes (CSS & SCSS)

Modify src/styles.css:

        
/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://MyCompany.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #666666; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #333333; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #FF4081; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --swiper-pagination-color: var(--accent-color) /* Change bullet color */

}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff; /* The default color of the main navmenu links */
  --nav-hover-color: #EC407A; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #666666; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #F06292; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}
body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
}
              

2. Features of Component-Based Architecture

2.1 List of Components

            <app-hero></app-hero>
            <app-featured-services></app-featured-services>
            <app-about></app-about>
            <app-happy-clients></app-happy-clients>
            <app-why-choose-us></app-why-choose-us>
            <app-services></app-services>
            <app-pricing></app-pricing>
            <app-faq></app-faq>
            <app-portfolio></app-portfolio>
            <app-testimonials></app-testimonials>
            <app-team></app-team>
            <app-clients></app-clients>
            <app-blogs></app-blogs>
            <app-contact></app-contact>
                    

3. Custom Sidebar,Navigation and Footer

3.1 Header Component

<header id="header" class="header fixed-top">
    <div class="container-fluid">
      <a href="/" class="logo">
        <h1 class="sitename">MyCompany</h1>
      </a>
      <nav id="navmenu" class="navmenu">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#services">Services</a></li>
        </ul>
      </nav>
    </div>
</header>

3.1 Footer Component

HTML Structure

3.1.1. Footer Container

<footer id="footer" class="footer dark-background">

2.1.2. Footer Top Section

<div class="container footer-top">
  <div class="row gy-4">

3.1.3. Company Information Section

<div class="col-lg-4 col-md-6 footer-about">
  <a href="#" class="logo d-flex align-items-center">
    <span class="sitename">MyCompany</span>
  </a>
  <div class="footer-contact pt-3">
    <p><a href="https://www.google.com/maps?q=A108+Adam+Street" target="_blank">A108 Adam Street</a></p>
    <p>New York, NY 535022</p>
    <p><strong>Phone:</strong> <a href="tel:+155895548855">+1 5589 55488 55</a></p>
  </div>

3.1.4. Social Media Links

<div class="social-links d-flex mt-4">
  <a href="#"><i class="bi bi-twitter-x"></i></a>
  <a href="#"><i class="bi bi-facebook"></i></a>
  <a href="#"><i class="bi bi-instagram"></i></a>
  <a href="#"><i class="bi bi-linkedin"></i></a>
</div>

3.1.5. Useful Links Section

<div class="col-lg-2 col-md-3 footer-links">
  <h4>Useful Links</h4>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Terms of service</a></li>
    <li><a href="#">Privacy policy</a></li>
  </ul>
</div>

3.1.6. Services List

<div class="col-lg-2 col-md-3 footer-links">
  <h4>Our Services</h4>
  <ul>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Web Development</a></li>
  </ul>
</div>

3.1.7. Newsletter Subscription Form

<div class="col-lg-4 col-md-12 footer-newsletter">
  <h4>Our Newsletter</h4>
  <p>Subscribe to our newsletter!</p>
  <form action="forms/newsletter.php" method="post" class="php-email-form">
    <div class="newsletter-form">
      <input type="email" name="email" placeholder="Your Email">
      <input type="submit" value="Subscribe">
    </div>
  </form>
</div>

3.1.8. Copyright and Credits

<div class="container copyright text-center mt-4">
  <p>© MyCompany All Rights Reserved</p>
  <div class="credits">Designed by MyCompany</div>
</div>

3.1.9. Scroll to Top Button

<a href="#" id="scroll-top" class="scroll-top">
  <i class="bi bi-arrow-up-short"></i>
</a>

3.1.10. Preloader

<div id="preloader"></div>

4. Angular 18 PWA Configuration Guide

  1. Locate and Update the Manifest File

    Find the file at src/assets/manifest.webmanifest and replace its content:

    {
      "name": "MyCompany",
      "short_name": "MyCompany",
      "theme_color": "#FF4081",
      "background_color": "#ffffff",
      "description": "A modern Progressive Web App (PWA).",
      "display": "standalone",
      "orientation": "portrait",
      "scope": "./",
      "start_url": "/index.html",
      "icons": [
        { "src": "icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
        { "src": "icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
      ]
    }
                
  2. Update PWA Icons

    Place new icons in src/assets/icons/. Required sizes:

    • 72x72
    • 96x96
    • 128x128
    • 192x192
    • 512x512
  3. Update Service Worker Configuration

    Modify src/ngsw-config.json to include icons:

    {
      "index": "/index.html",
      "assetGroups": [
        {
          "name": "app",
          "installMode": "prefetch",
          "updateMode": "prefetch",
          "resources": {
            "files": [
              "/favicon.ico",
              "/index.html",
              "/assets/icons/**"
            ]
          }
        }
      ]
    }
                
  4. Enable PWA in Angular Configuration

    Edit angular.json and set serviceWorker to true:

    {
      "projects": {
        "my-app": {
          "architect": {
            "build": {
              "options": {
                "serviceWorker": true,
                "ngswConfigPath": "ngsw-config.json"
              }
            }
          }
        }
      }
    }
                
  5. Clear Cache and Test

    Open Developer Tools (F12) → Application → Clear Storage → Click "Clear site data".

    Go to Application → Manifest to verify icons and configurations.

  6. Build the PWA

    Run the following command to generate the production build:

    ng build --configuration=production