Issue: Failed to access the 'setDir' property of an undefined object

Greetings, I am a newcomer to Ionic/Angular and have been facing a particular issue for over 20 days now. I have created a small app and would like to implement multi-language support with both RTL and LTR directions. I followed the documentation provided here: https://ionicframework.com/docs/theming/rtl-support/

However, despite following the instructions, the problem persists.

ERROR TypeError: Cannot read property 'setDir' of undefined

Below is an excerpt from my code:

segmentChanged(event) {
    this.translateService.use('ar');
    this.test = "ar";
    if (this.test == "ar"){ 
      this.platform.setDir('rtl', true);
      } else {
this.platform.setDir('ltr', true);}

I am utilizing ionic 3 along with ngx-translate.

angularjstypescriptionic-frameworkngx-translate

Answer №1

This code snippet is related to the menu.ts file.

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController, Events } from 'ionic-angular';
import { HomePage } from '../home/home';
import { Signup } from '../signup/signup';
import { Login } from '../login/login';
import * as WC from 'woocommerce-api';
import { ProductsByCategory } from '../products-by-category/products-by-category'
import { Storage } from '@ionic/storage';
import { Cart } from '../cart/cart';
import { TranslateService } from '@ngx-translate/core';
import { Platform } from 'ionic-angular';


@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class Menu {

  homePage: Component;
  WooCommerce: any;
  categories: any[];
  @ViewChild('content') childNavCtrl: NavController;
  loggedIn: boolean;
  user: any;
  test: any;
  platform:any;

  languageSelected : any = 'en';

  dir: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage, public modalCtrl: ModalController, private events: Events, private translateService: TranslateService,public plt: Platform) {
    this.homePage = HomePage
    // additional code here...
      
}

// Additional functions and methods...

}

The code for the corresponding menu.html file is as follows:

<!--*****************************************-->
<ion-nav #content [root]="homePage"></ion-nav>

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

Updating the navigation bar in Node/Angular 2 and displaying the sidebar once the user has logged in

I am facing a challenge with my first project/application built using Angular 2, particularly related to the login functionality. Here is what I expect from the application: Expectations: When I load the login component for the first time, the navbar ...

node.jsangulartypescriptrxjs5

Updating state atoms in Recoil.js externally from components: A comprehensive guide for React users

Being new to Recoil.js, I have set up an atom and selector for the signed-in user in my app: const signedInUserAtom = atom<SignedInUser | null>({ key: 'signedInUserAtom', default: null }) export const signedInUserSelector = selecto ...

javascriptnode.jsreactjstypescriptrecoiljs

Dealing with Unexpected Timeout Errors and Memory Leaks in Express/Typescript Using Jest, Supertest, and TypeORM

Currently, I am in the process of writing unit tests for an express API. Each test suite initiates a fresh instance of an express server before running the tests. Individually, each test suite runs smoothly without any problems. However, when executed tog ...

typescriptexpressjestjssupertest

What is the best way to execute tests in different environments with Protractor?

Is it possible to execute specifications in various environments? Maybe by adjusting the protractor-config file? Could we do something along the lines of specs: ['../tests/*.js', server1], ['../more_tests/*.js', server2] within the ...

javascriptnode.jsangularjsmocha.jsprotractor

AngularJS - Click event failing to trigger controller function

I am currently honing my skills in Angularjs and Nodejs through working on a project. Following a helpful tutorial, I have structured my folders and configured my routes. Issue: I implemented a method called isActive to update ng-class when a tab is ...

javascriptangularjsnode.jsexpressangular-controller

Observing the completion of a subscriber function

Is there a more streamlined way to determine if the subscriber has finished executing or return something and catch it up-stream? Consider the following code snippets: this._subscriptions.push(this._client .getCommandStream(this._command) // R ...

javascripttypescriptpromiserxjsobservable

Angular- Product Details

I'm currently expanding my knowledge of angular (utilizing the ionic framework with phone gap included) and I'm working on developing a single application that displays a list of data. When a user clicks on an item in the list, I want to show the ...

javascriptangularjs

Example: Utilizing data transfer from model to directive

I have a question regarding a specific part in an example from Thinkster. I believe my confusion is due to my limited understanding of JavaScript and AngularJS fundamentals. I've been teaching myself since December, starting with the basics of JavaScr ...

javascriptangularjs

Issue with Type-Error when accessing theme using StyledComponents and TypeScript in Material-UI(React)

I attempted to access the theme within one of my styled components like this: const ToolbarPlaceholder = styled('div')((theme: any) => ({ minHeight: theme.mixins.toolbar.minHeight, })); This information was found in the documentation: htt ...

javascriptreactjstypescriptmaterial-ui

Checking the functionality of a feature with Jasmine framework in an Angular application

I am working on writing unit test cases and achieving code coverage for the code snippet below. Any advice on how to proceed? itemClick($event: any) { for (let obj of this.tocFiles) { let results = this.getchildren(obj, label); if (results) { conso ...

angulartypescriptunit-testingkarma-jasmine

The shape-matching subset functionality in Typescript is experiencing issues

One of the key principles of TypeScript is that type checking focuses on the structure of values, a concept known as duck typing or structural typing. This means that only a subset of an object's fields needs to match for it to be considered compatibl ...

typescript

The message states that the variable "Chart" has not been defined

I have been attempting to integrate ChartJS with Angular2, but I keep encountering an error message stating that 'Chart is not defined'. I made sure to install the ChartJS typings and referenced them accordingly. Additionally, I included the char ...

typescriptangularchart.js

Clearly define in typescript that a variable should not be null

Encountering an issue with typescript involving a mongoose model that is interface casted. import { Schema, model } from "mongoose"; interface IUser { userId: string guildId: string cash: number bank: number } const userSchema = ...

typescriptmongoosenull

Guide to creating animations with javascript/react js

My attempt at altering the opacity of an element every 100 milliseconds following a click event has not been successful. The function change is triggered by a click, yet the code does not work as intended. Here's what I have so far: function change (i ...

javascriptreactjstypescript

The absence of the import no longer causes the build to fail

Recently, after an update to the yup dependency in my create react-app project, I noticed that it stopped launching errors for invalid imports. Previously, I would receive the error "module filename has no exported member X" when running react-scripts buil ...

javascripttypescripteslintreact-scripts

What is the reason behind using 'dummy' local variables to define return object keys?

I've come across a code similar to the one below on several occasions recently. One thing to observe is that modelMapper, viewMapper, and source are all defined as local variables but are not used anywhere else, except for being keys in the return ob ...

javascriptangularjs

Adjust the scroll bar to move in the reverse direction

I'm trying to modify the behavior of an overlay div that moves when scrolling. Currently, it works as expected, but I want the scroll bar to move in the opposite direction. For example, when I scroll the content to the right, I want the scroll bar to ...

javascripthtmlcsstypescript

Set a value to the field name within a variable in TypeScript

Can anyone help me with this problem? type A { f1: string; f2; string; } I have a variable that holds the name of a field: let fieldName: string = "f2"; I want to create an object using the fieldName: {"content of fieldName": "sdf"} Any suggestio ...

typescript

What could be the reason for my npm package installed globally to not be able to utilize ts-node?

Recently, I've been working on developing a CLI tool for my personal use. This tool essentially parses the standard output generated by hcitool, which provides information about nearby bluetooth devices. If you're interested in checking out the ...

node.jstypescriptnpmts-node

Exploring JSON data in real-time

My goal here is to utilize the variables retrieved from the route to determine which blog to access from the JSON file. The JSON file consists of an array of sections, each containing an array of blogs. Although the code works flawlessly when I manually s ...

jsonangulartypescript