"Using Angular and TypeScript to dynamically show or hide tabs based on the selected language on a website

When switching the language on the website, I want to display or hide a specific tab. If the language is set to German, then show the tab; if any other language is selected, hide it. Here's my code:

ngOnInit(): void {
    this.translate.onLangChange.subscribe({next: (event: { lang: string; }) =>{
            if(event.lang && event.lang === 'de'){
                this.tabsArray =  this.tabsArray.filter((tab) => tab.label !== certainPathLabel );
            }
            else{
                const foundLabel = this.tabsArray.find((tab)=>tab.label == certainPathLabel );
                if(!foundLabel) {
                    this.tabsArray.splice(4,0, {label: certainPathLabel , route: this.routeService.generateUrl(certainPatRoute)})      
                }

            }
            this.tabs$.next(this.tabsArray);
        }

    });
}

This logic works for showing and hiding the tab when selecting German. However, there seems to be an issue when trying to display the tab again after selecting a different language. Any suggestions on how to resolve this?

javascriptangulartypescript

Answer №1

Is there a possibility to utilize a basic observable?

isGerman$ = this.translate.onLangChange.pipe(
  map({ next: (event: { lang: string; }) } => // Do you confirm for { } ?
    event.lang && event.lang === 'de'
  )
);

<tabs>
  <tab *ngIf="isGerman$ | async">German</tab>
</tabs>

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

What is preventing the spread type from being applied to `Record` in TypeScript?

export type AddResourceProps<K extends string, T extends any> = (resource: BasicResource) => Record<K, T> const addtionalResourse = addResourceProps ? addResourceProps(resource) : {} as Record<K,T> const result = { ...addtionalRe ...

reactjstypescriptredux

Editing XHTML on the fly

Is there a tool available for non-technical individuals to edit hard-coded content in XHTML? I am interested in a solution similar to the integration of Pagelime with jEditable. Currently, my website is static and I am seeking a way for one person to log ...

javascriptjqueryxhtml

Looking for a solution to the problem: Module 'import-local' not found

internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'import-local' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15) at Function.Module._load (internal/modules/cjs/loader.js:520:25) Encoun ...

javascriptnpmbabeljs

GraphQL Error (Status Code: 429) - Next.js Development issue

If you're facing a GraphQL Error (Code: 429) while working on a nextjs project, here's a handy solution. Here's what happened: I created a headless CMS using Hygraph and NextJS 13 for a blog project. I also utilized the npm package graphql ...

javascriptreactjsnext.jsgraphqlhygraph

Experiencing an unusual issue with grunt: The Gruntfile.js seems to be missing the 'flatten' method

Encountering an unusual error message while attempting to run grunt stated: TypeError: Object Gruntfile.js has no method 'flatten' Being a beginner with node.js, npm, and grunt, I believe my installation of node, npm, and grunt was done correctl ...

javascriptnode.jsnpmgruntjs

Ways to ensure certain code is executed every time a promise is resolved in Angular.js

Within my Angular.js application, I am executing an asynchronous operation. To ensure a smooth user experience, I cover the application with a modal div before initiating the operation. Once the operation is complete, regardless of its outcome, I need to r ...

javascriptangularjspromisedeferredfinally

Dealing with the challenges posed by middleware such as cookie access and memory leaks

Utilizing express with cookieParser() where my client possesses the cookie named: App.Debug.SourceMaps. I've crafted a middleware as follows: app.get('/embed/*/scripts/bundle-*.js', function(req, res, next) { if (req.cookies['App ...

javascriptnode.jscookiesexpressmiddleware

Having difficulty utilizing the express.session module in conjunction with HTTPS

I need to implement authentication and session creation on a HTTPS static website using expressjs. Here is the code snippet: app.js: // Set up the https server var express = require('express'); var https = require('https'); var http ...

javascriptnode.jssessionhttpsexpress

Get started by setting up and utilizing react version 0.14.0 on your

I'm currently facing an issue in my project while using react-0.14.0. The error message I'm encountering is: Invariant Violation: ReactDOM.render(): Invalid component element. This may be caused by unintentionally loading two independent copie ...

javascriptreactjsnpmbrowserify

The issue with fetching user profile data on the client-side in Next.js 14

I've run into a problem with client-side data fetching on my Next.js 14 project. More specifically, I'm trying to retrieve user profile information from a backend API using Axios within a component, but for some reason, the data isn't coming ...

javascriptreactjsnext.jsaxiosmern

Creating a shared component for restricting input to only numbers in ReactJS with Material-UI TextField

I am currently working with MUI TextField and my goal is to implement a validation that allows only numbers but not the eE+- keys. I aim to create a standard component for this using onChange event. I need to address the scenario where if the user enters ...

javascriptreactjsmaterial-ui

Generate a visually dynamic representation of a live website page

I'm curious if it's possible to create a login page similar to the one shown in this image, using HTML, CSS, and Javascript. Instead of a traditional background image, I want the background to display the actual layout of another website, such a ...

javascripthtmlcss

Getting started with accessing an API using Angular 2

I am seeking a way to navigate outside of my Angular 2 application to mywebsite.com/api. This link should direct me to an API application hosted on the same server. Here is my current route configuration. export const routes: Routes = [ {path: '& ...

angularangular2-routingangular2-services

Angular's ng-for directive allows for easy iteration over a collection of

I have a list of links that I am looping through using the ng-for directive. Each link is supposed to display an icon with different timing intervals thanks to a plugin called wowjs. The first link should appear quickly, while the last one should appear sl ...

javascriptangularwow.js

Managing Prisma error handling in Express

Dealing with error handling using ExpressJS and Prisma has been a challenge for me. Anytime a Prisma Exception occurs, it causes my entire Node application to crash, requiring a restart. Despite looking at the Prisma Docs and doing some research online, I ...

node.jstypescriptexpressbackendprisma

Choose all the HTML content that falls within two specific tags

Similar Question: jquery - How to select all content between two tags Let's say there is a sample HTML code as follows: <div> <span> <a>Link</a> </span> <p id="start">Foo</p> <!-- lots of random HTML ...

javascriptjqueryhtml

Experiencing difficulties loading webpages while attempting to execute Routes sample code using NodeJS

As a beginner in Javascript, I am attempting to execute the example code provided in the documentation for routes. The code snippet is as follows: var Router = require('routes'); var router = new Router(); router.addRoute('/admin/*?&apos ...

javascriptnode.js

When utilizing TS Union Types from an Array, the resulting type will consistently be a

After reading this response, I decided to create some union types from a string[] in order to return a list of valid type values. However, instead of that, the type ends up accepting any string value. const arrayDays = Array.from(Array(32).keys(), (num) =& ...

typescriptunion-types

Start the CSS3 animation in reverse right away

I am trying to achieve a "flashing" effect by adding the .shown class to my #overlay, causing the opacity to fade in for 2 seconds and then immediately reverse, fading out for another 2 seconds. After experimenting with removing the class, I found that it ...

javascripthtmlcss

Using Selenium Webdriver with Node.js to Crop Images

Currently, I am using selenium-webdriver in combination with nodejs to extract information from a specific webpage. The page contains a captcha element from which I need to retrieve the image. Unfortunately, all the code snippets and solutions I came acros ...

javascriptnode.jsselenium