What is the best way to utilize *ngSwitchWhen in a TypeScript environment?

I am currently working with Ionic2 and Angular2 and encountering an issue while trying to implement a segment using ngSwitchWhen. Unfortunately, the functionality is not working as expected and I am receiving an error message.

How can I resolve this issue? What may be causing it to not work properly?

Below is the error message that appeared:

https://i.sstatic.net/JXO5g.png

<ion-toolbar>
    <ion-segment [(ngModel)]="menuSelect" color="important">
        <ion-segment-button value="light">
            Light
        </ion-segment-button>
        <ion-segment-button value="sensor">
            Sensor
        </ion-segment-button>
    </ion-segment>
</ion-toolbar> 

<ion-content [ngSwitch]="menuSelect">
    <!--func+ - light-->
    <ion-item *ngSwitchWhen="'light'">
        <ion-list>
            <ion-list-header>
                <ion-label>On/Off</ion-label>
                <ion-toggle (click)="toggleLight()"></ion-toggle>
            </ion-list-header>
        </ion-list>

        <!--light-off-->
        <div [hidden]="lightOn">
            <div class="light-off">Please turn on the light.</div>
        </div>

        <!--light-on-->
        <div [hidden]="!lightOn">
            <ion-list>
                <ion-list-header class="title">
                    Color
                </ion-list-header>
            </ion-list>
            <ion-list>
                <ion-list-header class="title">
                    Brightness
                    <ion-badge>{{brightness}}</ion-badge>
                </ion-list-header>
                <ion-item>
                    <ion-range min="0" max="5" step="1" snaps="true" [(ngModel)]="brightness">
                        <ion-icon range-left small name="sunny"></ion-icon>
                        <ion-icon range-right name="sunny"></ion-icon>
                    </ion-range>
                </ion-item>
            </ion-list>
        </div>
    </ion-item>

    <!--func+ - sensor-->
    <ion-item *ngSwitchWhen="'sensor'">
        <ion-list>
            <ion-list-header>
                <ion-label>On/Off</ion-label>
            </ion-list-header>
        </ion-list>
    </ion-item>
</ion-content>
angulartypescriptionic-frameworksegmentngmodel

Answer №1

If you're facing an issue, consider attempting the following solution:

Make sure to update 'ngSwitchWhen' to 'ngSwitch' in your keyboard settings

Within your @Component.Html file

<div [ngSwitch]="data.type">
  <div *ngSwitchDefault>FORM 1</div>
  <div *ngSwitchCase="'light'">FORM 2</div>
  <div *ngSwitchCase="'sensor'">FORM 2</div>
</div>

And then in your @Component.ts file:

public data:any[]=[];
data.push({type:'light'},{type:'sensor'});

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

Angular: utilizing two ngFors to target and update specific sections of the DOM

I'm facing a challenge and unsure if it's achievable in Angular. Below is a simple HTML code snippet: <div > <div *ngFor="let item of apiNames, let i = index" class="rescontainer"> <div class="resbox headline"> ...

angularngfor

Tips for maintaining knowledge after redirecting to a new page

Building an app using Ionic 4 where I need to display vouchers from a database as images. Each image should act as a link to a details page showing more information about that specific voucher. However, I am struggling to figure out how to keep track of th ...

htmlangulartypescriptionic4

Exploring alternative applications of defineModel in Vue 3.4 beyond just handling inputs

The examples provided for defineModel in the Vue documentation primarily focus on data inputs. I was curious if this functionality could be utilized in different contexts, potentially eliminating the need for the somewhat cumbersome props/emit approach to ...

typescriptvue.jsvuejs3vue-composition-apivue-script-setup

Using Typescript for the factory design pattern

My goal is to develop a factory for generating instances of MainType. To achieve this, I want to reuse existing types (specifically the same instance) which are stored in the ItemFactory. class BaseType { } class MainType extends BaseType { } class It ...

typescriptgenericstypestype-conversionfactory

Class for Eliminating the Background Image Using Bootstrap

Is there a Bootstrap class that can be used to remove a background image from a div? Currently, I have this style defined in my CSS: background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0)); I would like to remove it using: bg-img-non ...

javascripthtmlcsstypescriptbootstrap-4

Updating a subscribed observable does not occur when pushing or nexting a value from an observable subject

Help needed! I've created a simple example that should be working, but unfortunately it's not :( My onClick() function doesn't seem to trigger the console.log as expected. Can someone help me figure out what I'm doing wrong? @Component ...

angulartypescriptionic2rxjs5

How to integrate Three.js into Angular 14 while managing dependencies

I'm currently working on developing a web app using angular cli and incorporating three.js for enhanced product interaction. Despite watching numerous tutorials, I've been unable to successfully integrate three js into angular 14. It seems to wor ...

angularthree.js

Upgrading from Angular 5 to Angular 7: A seamless migration journey

Following my migration from Angular 5 to Angular 7, I encountered an issue with RxJs operations such as observables and @ngrx/store. Here is the error message I received: ERROR in node_modules/@ngrx/store/src/actions_subject.d.ts(2,10): error TS2305: Mo ...

angularrxjsstoreangular7

Tips for accessing files following the transmission of a post request within the req.body

Encountering a problem where image uploads to an s3 bucket are not successful. The error message received is: API resolved without sending a response for /api/upload/uploadPhoto, this may result in stalled requests. The front end includes an input that ca ...

javascripttypescriptfileamazon-s3next.js

Issues with updating ngModel in Angular 4 after input changes during testing

My application consists of a simple component with just one input: @Component({ selector: 'mycomponent', styles: [ ], template: ` <div class="new-stuff"> <div> <div> Name: <input type="text ...

angularjasminetestbed

The process of retrieving data from Firebase Firestore

Here is the content of my HTML File: <div class="container m-3 p-3"> <h1>Current Items</h1> <ul class="list-group"> <li class="list-group-item">An item</li> <li class="list-gro ...

angularfirebase

When validating storage content, session value appears as null

I have been working on developing an Ionic app that requires creating a session for user login. The goal is to store the user's name upon logging in, so it can be checked later if the user is still logged in. I have created a model class and a user cl ...

angulartypescriptsessionionic-framework

Guide on entering text into an Angular input field with Selenium in Python after navigating tabs

After switching tabs, I am attempting to enter text into an Angular input field. However, I keep encountering the following errors: AttributeError: 'tuple' object has no attribute 'send_keys' or ElementClickInterceptedException or NoS ...

pythonangularseleniumxpathcss-selectors

What are the steps for deploying an Angular 2 project to a server with PUTTY?

After developing an Angular 2 app with Angular-CLI on my local server, I have reached the production phase and now need to upload it to a CentOS server using Putty. I attempted to follow instructions from this source for installing node and npm on the ser ...

node.jsangulardeploymentserver

"Encountering a Cypress Angular error: CypressError with the message 'Timed out retrying: Expected content was not

During my Cypress test run, I encountered an error message on the last step (click) which stated: Timed out retrying: Expected to find element: .button-darkblue, but never found it. Here is the code snippet: describe('Test Login', () => { i ...

angularcypress

Fill out FormBuilder using data from a service within Angular2

I am working with an Angular2 model that I'm filling with data from a service. My goal is to use this model to update a form (created using FormBuilder) so that users can easily edit the information. Although my current approach works, I encounter er ...

javascriptangulartypescript

Challenges with slow performance in Ionic application when handling extensive amounts of data

We're facing performance issues with our ionic angular contact management app. The app experiences severe slowdown as the number of contacts increases, affecting taps, scrolls, and overall responsiveness. Despite utilizing offline storage to store da ...

angularperformanceionic-framework

Troubles arising while using ng serve in Angular 2

I'm currently facing an issue during the installation process of an existing Angular application. When trying to run the application using the ng serve command, I encounter the following error message: The "@angular/compiler-cli" package was not prope ...

javascriptangularnpmnpm-install

Is there a way to extract a specific item from a ListView by tapping on it in Nativescript?

Attempting to retrieve data from a tap event using angular2 + typescript: This is the html code for the component: <RadListView row="1" [items]="groceryList" [class.visible]="listLoaded" (tap)="seeItem($event)" swipeActions="true" (itemSwipeProgr ...

angulartypescriptnativescript

Organizing files in an ExpressJs project with Angular2

What is the conventional file structure for a mix of ExpressJs and Angular2 projects? Here's my current setup: Project | |--bin |--node_modules |--public |--images |--javascripts |--stylesheets |--routes |--views |--app.js |-- ...

node.jsexpressangular