Effortless Theme Toggling in Angular Standalone Apps with PrimeNG-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Effortless Theme Toggling in Angular Standalone Apps with PrimeNG

Jul 17, 2024 am 11:26 AM

Theme toggle PrimeNG

As I delved into PrimeNG and PrimeFlex for my recent Angular 17 standalone app with SSR, one aspect truly stood out: built-in themes. Unlike Material UI, PrimeNG offers a delightful selection of pre-built themes that you can easily configure within your application.

But the real cherry on top? Setting up a theme switcher to empower users to personalize their experience is a breeze with just a few lines of code. Let’s dive in!

Priming Your App for Themes:

Installation: Get started by installing PrimeNG using npm or yarn.

npm install primeng --save

Include Styles in angular.json:

Ensure your angular.json file includes the necessary styles. Below is my folder structure and its inclusion in angular.json.

Folder Structure

In each stylesheet, I imported built-in PrimeNG Themes from resources.

 //angular.json 
 "styles": [
              "src/styles.css",
              {
                "input": "src/app/styles/lara-dark-teal.scss",
                "bundleName": "lara-dark-teal",
                "inject": false
              },
              {
                "input": "src/app/styles/lara-light-teal.scss",
                "bundleName": "lara-light-teal",
                "inject": false
              }
            ],

Copy after login

This configuration guarantees the stylesheets are bundled into your final dist folder during build time.

Setting the Default Theme (index.html):

Include Stylesheet: In your index.html file, incorporate the stylesheet for your chosen default theme and assign it an ID for service access:

&lt;!doctype html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Theme Switcher&lt;/title&gt;
  &lt;base href="/"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;link id="app-theme" rel="stylesheet" type="text/css" href="lara-light-teal.css"&gt;

  &lt;link rel="stylesheet" href="https://unpkg.com/primeflex@latest/primeflex.css"&gt;
&lt;/head&gt;

&lt;body class=""&gt;
  &lt;app-root&gt;&lt;/app-root&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Dynamic Theme Switching with a Service:

Create a Theme Service: Construct a service to manage theme changes. Inject it into your root component for application-wide accessibility:

//themes.service.ts
import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
    providedIn: 'root',
})
export class ThemeService {

    constructor(@Inject(DOCUMENT) private document: Document) {}

    switchTheme(theme: string) {

        let themeLink = this.document.getElementById('app-theme') as HTMLLinkElement;

        if (themeLink) {
            themeLink.href = theme + '.css';
        }
    }
}

Copy after login

Using the service inside Component:

Inject Service and Document: Within your component, inject the ThemeService and the Document object:

  constructor(private themeService: ThemeService) {

  }
  checked: boolean = false;

  changeTheme() {
    let theme = (this.checked) ? "lara-dark-teal" : "lara-light-teal"
    this.themeService.switchTheme(theme);

  }

}

Copy after login

Template with p-toggle: Utilize the p-toggle component from PrimeNG to render the toggle button. Bind its state to a boolean variable (checked) and trigger the changeTheme() method on click. Employ pi-icons (PrimeNG icons) for visual appeal.

&lt;p-toolbar styleClass="bg-primary shadow-2  opacity-80"&gt;

    &lt;div class="flex-grow"&gt;
        My Theme Switcher
    &lt;/div&gt;
    &lt;p-toggleButton styleClass="bg-primary shadow-2 text-white" [(ngModel)]="checked" onIcon="pi pi-sun"
        offIcon="pi pi-moon" (click)="changeTheme()" /&gt;

&lt;/p-toolbar&gt;

Copy after login

Separation of Concerns: The service concentrates on theme management, keeping your component clean and focused.

Enhanced Readability: The code is well-structured and easy to comprehend for developers of all levels.

Developer Delight: PrimeNG streamlines the process, empowering you to craft a seamless theme-switching experience in your Angular 17 application.

The above is the detailed content of Effortless Theme Toggling in Angular Standalone Apps with PrimeNG. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn