Transmitting language codes from Wordpress Polylang to Angular applications

I am currently attempting to manage the language settings of my Angular application within WordPress using WordPress Polylang.

To achieve this, I have set up the following structure in my Angular application:

getLanguage.php

<?php
require_once("../../../../../wp-load.php");
$data = get_bloginfo("language");
echo json_encode($data);
?>

http.service.ts

getLanguage(): any {
   return this.http.get(environment.url)
}

app.component.ts

this.http.getLanguage().subscribe( res => {
      console.log(res);
      this.lang = res;
    });

The response will be either de-DE or fr-FR.

This setup is functioning correctly. However, I have encountered an issue where changing the language on my WordPress site to French does not reflect in the Angular application, and the LanguageCode remains at the default value of the German language, de-DE.

My Angular application resides within the WordPress theme and is accessed via a WordPress page-app.php.

I am curious if there is an alternative method to transmit the language setting from WordPress Polylang to the Angular app, or if there may be something overlooked in my current setup.

Answer №1

It couldn't have been easier.

All I had to do was translate the wordpress page named page-app.php

Now, I've got page-app.php for German and page-app-fr.php for French.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating through PWAs and implementing deep linking in both single page applications (SPAs) and multi-page applications

QUESTION: How can navigation, history, and deep-linking be managed in a PWA without relying on a heavy JS Framework? Tasked with transitioning an existing shopping website from Angular 1 SPA to a Multi Page App (MPA) PWA, I find myself grappling with desi ...

Experimenting with async generator using Jest

It has become clear that I am struggling with the functionality of this code, especially when it comes to testing with Jest. Despite my efforts to use an await...of loop, I am not getting any output. The file path provided to the generator is correct and I ...

Leverage properties within the storybook component template

When utilizing a class component in a narrative, it allows you to transmit properties as arguments: const Template: Story<MyComponent> = (args) => ({ props: args, component: MyComponent, }) export const Default = Template.bind({}); export co ...

Tips for effectively hydrating Redux state in Next.js upon page refresh?

I'm experiencing an issue with hydrating user data from local storage upon app reload or page refresh. My project utilizes NextJS for the frontend, and for managing state across the application I rely on redux-toolkit and next-redux-wrapper. Upon us ...

Shifting attention to an angular 6 form field

I am developing an application in Angular which involves creating, reading, updating, and deleting user information. I have a requirement for the username to be unique and need to display an error message if it is not unique, while also focusing on the use ...

Transmitting HTML content to the browser from the client using Node.js

Quoted from: Book - "Getting MEAN with Mongo, Express.." When it comes to responding to requests in your application by sending HTML to the browser, Express simplifies this process compared to native Node.js. With support for various templating e ...

The utilization of rxjs' isStopped function is now considered

We currently have this method implemented in our codebase: private createChart(dataset: any): any { if (!this.unsubscribeAll.isStopped) { this.chart = this.miStockChartService.createChart(dataset, this.chartId, this.options, this.extend ...

React typescript - Error: Type 'boolean' is not compatible with the expected type

Check out this demo This is a simple React application built with Typescript. Currently, I am experimenting with React's Context API. I have set up a context named ThemeContext which holds basic theme styling values to be used across different comp ...

Comparing ngrx and redux for managing state in stateless components

Exploring ngrx/angular 8 for the first time, I'm curious to know if the angular approach of using an observable to bind a state value to the this context still allows a component to remain presentational and stateless. In the realm of angular/ngrx, c ...

Encountering an issue with importing from 'sockjs-client' in TypeScript

I am a beginner with Angular and TypeScript. To get started, I used npm to install the following package: npm install --save sockjs-client I attempted to import it in my chat.component.ts file like this: import * as SockJS from 'sockjs-client'; ...

looking to restrict the interface to only specific types

Currently working with TypeScript and I have a query regarding the utilization of TypeScript interface. Is there a way to selectively extract and output specific key types from the interface being used? While I am able to isolate the type I need, I am inte ...

Tips for dynamically updating the Header name based on backend data

I am currently utilizing ag-grid within my Angular application. Within the columnDefs array, I have defined headers for my grid. One of the headers is for a column labeled Amount. My goal is to make this header dynamic, so that if the currency value coming ...

Typescript offers a feature where we can return the proper type from a generic function that is constrained by a lookup type,

Imagine we have the following function implementation: type Action = 'GREET' |'ASK' function getUnion<T extends Action>(action: T) { switch (action) { case 'GREET': return {hello: &a ...

What steps should I take to customize WebStorm so that it no longer automatically imports the entire Typescript paths?

Recently, I noticed a change in WebStorm after an update that affected how paths were imported in my files. Initially, when typing @Component and letting WebStorm automatically import the path, it would use the following format: import { Component } from ...

Can anyone provide guidance on incorporating lodash into an Ionic 2 project?

Recently, I began diving into a new project that involves Ionic 2. TypeScript is still fairly new to me, and I've been brainstorming ways to integrate lodash into my project. Have any of you tackled this before and can offer guidance on how to achiev ...

How to assign attributes to multiple menu items in WordPress without using JavaScript

I'm currently working on adding attributes to each item in my WordPress navbar. Here is what I have at the moment: <ul id="menu-nav-bar" class="menu"> <li><a href="#text">text</a></li> <li><a href="#car ...

Attempting to launch Angular application on GitHub Pages

I need help deploying my Angular application on GitHub pages using node.js 14.20.0. I've successfully installed: npm i angular-cli-ghpages However, when I try to run : ng deploy --base-href=https://rejkid.com.github.io/ScheduleMeFrontEnd/ as recomme ...

Utilizing an OpenApi-based filter in Angular (Ionic): A step-by-step guide

Currently, I am utilizing ng2-search-filter in my Ionic application to filter data in the list. However, my objective is to perform filtering on the backend and then pass this filtered data to the frontend. The interface that connects the backend and fron ...

Tips for receiving a linter/compiler warning when comparing a function without its call being made?

Often, I find myself making a common mistake when writing TypeScript code: class Foo { constructor() { } public get isFoo(): boolean { return true; } // getter public isBar(): boolean { return false; } // normal function } let foo = new Foo(); if ( ...

What steps can I take to improve this code and prevent the error "Property 'patient' does not exist on type 'Request<ParamsDictionary>'" from occurring?

I'm having some issues with my code. I am attempting to use passport authenticate in order to save patient information that is specific to the token generated for each individual. router.get("/current", passport.authenticate("jwt", { session: false }) ...