Angular 2- Unable to bind to 'ngSwitchCase' as it is not recognized as a native property

I am facing an issue with my code where I have two lists that are displayed in my .html file. In order to avoid repetition, I decided to utilize ngSwitch. However, when I try to implement this approach, I encounter an error. Here is the snippet of code causing the problem:

<div [ngSwitch]="currentListView">
    <div *ngSwitchCase="'People'">
      <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOfPeople">
        <div class="list-bg" *ngFor="#person of listOfPeople; #i = index" dnd-sortable [sortableIndex]="i">
          ID: {{bulk.person}} <p></p> Name: {{person.name}}
        </div>
      </div>
    </div>
    <div *ngSwitchCase="'Cars'">
      <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData]="listOfCars">
        <div class="list-bg" *ngFor="#car of listOfCars; #i = index" dnd-sortable [sortableIndex]="i">
          ID: {{car.id}} <p></p> Color: {{car.color}}
        </div>
      </div>
    </div>

Concerning the mentioned error for each list, it states:

(in promise): Template parse errors: Can't bind to 'ngSwitchCase' since it isn't a known native property ("

<div [ngSwitch]="currentListView">
    <div [ERROR ->]*ngSwitchCase="'People'">
      <div dnd-sortable-container [dropZones]="['zone-one']" [sortableData"): AppCmp@42:9
Property binding ngSwitchCase not used by any directive on an embedded template ("

  <div [ngSwitch]="currentListView">
    [ERROR -><div *ngSwitchCase="'People'">
      <div dnd-sortable-container [dropZones]="['zone-one']" [sortabl"): AppCmp@42:4
Can't bind to 'ngSwitchCase' since it isn't a known native property ("
      </div>
    </div>

I am seeking assistance to troubleshoot this issue and also improve the efficiency of my code.

Thank you.

angulartypescript

Answer №1

When working with common elements like ngSwitch, ngIf, ngFor in Angular2, it is important to remember to import CommonModule into your application.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule
  ],
  providers: [],
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}

Answer №2

When working with standalone components, ensure to import both NgSwitch and NgSwitchCase.

Avoid using CommonModule as it includes all modules.

imports: [NgSwitch, NgSwitchCase]

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

The generic parameter is extending a type but is being used in a contravariant position, causing TypeScript to struggle to unify it

When developing my functions, I aim to provide flexibility for consumers to use a wider type. However, I encounter issues when the type is used in a contravariant position and TypeScript raises complaints. Here is the simplified code snippet: function wra ...

typescript

Troubleshooting a CSS problem within mat-autocomplete component in Angular 7

While using mat-autocomplete, I noticed that when I select an option from the dropdown and then scroll through the main bar, the dropdown menu does not move along with the autocomplete input field. view image here Here is the code snippet: <td width ...

cssangularjsangularmat-autocomplete

Error message TS2339: The method 'findAll' is not defined in the current context

Despite following the Sequelize guide for TypeScript configuration, I am unable to resolve an issue with my database connection. The connection is active, but I am struggling with a specific type problem: TSError: ⨯ Unable to compile TypeScript: controll ...

node.jstypescriptexpresssequelize.js

Tips for changing the name of a directory in an Angular 6 application

Looking for guidance on renaming a folder in an Angular 6 project's components directory. Is there a safe way to do this without causing any issues, or is it as simple as just changing the name of the folder? Using Visual Studio Code as my IDE. ...

angular

React: Issue accessing URL parameters using useParams() within a nested component

In my demo application, there are two components - QuoteDetail and Comments. Both require URL parameters, but I am only able to access them in the parent component. App.tsx: <Switch> // ... <Route path="/quotes" exact> <Al ...

reactjstypescriptreact-routerreact-router-dom

Verify the functionality of a specific method invoked within another method through unit testing

I currently have a method in my Angular application that is triggered upon clicking. Inside this method, I pass a value to another private method. .ts file public onViewItem(item: Results): void { const ids = [item.data['id']]; this.anot ...

javascriptangularunit-testingjasminekarma-jasmine

After a duration of 4 minutes, an ERR_EMPTY_RESPONSE is thrown in response to the

My angular 5 node app involves sending a request to the server and waiting for a response. There are instances where the response takes around 5-6 minutes to arrive. However, an ERR_EMPTY_RESPONSE error is triggered by the http method after just 4 minutes ...

javascriptnode.jsangular

In the realm of Typescript Angular, transferring the value of an object's property to another property within the

I'm working with a large TypeScript object and I am hoping to automate certain parts of it to streamline my workflow. myObject = [ { id: 0, price: 100, isBought: false, click: () => this.buyItem(100, 0) } buyItem (it ...

javascriptangulartypescriptobjectautomation

Is there a way for my React application to detect changes in an npm package?

I am currently customizing an npm package for my application, but I am facing issues with it not being detected when starting my development server. Previously, I was able to resolve this by removing the library and reinstalling it, followed by replacing t ...

javascriptreactjstypescriptnext.js

Having trouble using the 'in' operator to search for 'Symbol(StrapiCustomCoreController)' while transitioning Strapi to TypeScript

I'm in the process of converting my strapi project to typescript. I've updated all strapi packages to version 4.15.5 and converted the files to ts extension. However, upon running strapi develop, I encounter the following error: [2024-01-03 10:50 ...

typescriptstrapi

The term 'App' is being referenced as a value when it is intended to be a type. Perhaps you meant 'typeof App'?

I am eager to master Typescript with React through hands-on experience, so I recently made the manual transition from JavaScript to TypeScript in my create-react-app. However, when working with my default testing file App.test.ts: import { render, screen ...

reactjstypescript

In what situations might a finally block fail to execute?

Are there any circumstances where the code in a finally block may not be reached, aside from the usual suspects like process exit(), termination signal, or hardware failures? In this TypeScript code snippet that usually runs smoothly in node.js, occasiona ...

javascriptnode.jstypescript

Continuously refreshing the information displayed in the Angular view that is linked to a function in the TypeScript file whenever a modification is identified

I am currently working on an ecommerce application using the MEAN stack. In order to make the app real-time, I have integrated pusher-js. To show the quantity of a specific item in the shopping cart, I have implemented a function in the ts file that loops ...

node.jsangularexpresspusher

Exporting Axios.create in Typescript can be accomplished by following a few simple

My code was initially working fine: export default axios.create({ baseURL: 'sample', headers: { 'Content-Type': 'application/json', }, transformRequest: [ (data) => { return JSON.stringify(data); } ...

javascriptreactjstypescriptaxios

How can I display data both as a dropdown and an autocomplete in Angular using a textbox?

There is a textbox with autocomplete functionality. When the user clicks on the textbox, an API call is made with two parameters - Pubid and Date. The data is then displayed in a dropdown with autocomplete feature. Now I am attempting to have the data app ...

angulartypescript

Having trouble compiling my Angular application with success

I am working with a file named mock-values.ts. In this file, I have defined the following constants: export const TIMES: Time[] = [ { i: '8:00', v: '8' }, { i: '8:30', v: '8:30' }, { i: '9:00', v: &apo ...

angulartypescriptimportcompiler-errorsexport

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

I have a file called payment-shipping.tsx and eslint is throwing an error Filename is not in camel case. Rename it to 'paymentShipping.tsx' unicorn/filename-case However, the file needs to be in kebab case since it's a next.js page that s ...

javascripttypescriptnext.jseslinttypescript-eslint

Tips for retrieving next-auth authOptions from an asynchronous function

I need to retrieve values from AWS Secrets Manager and integrate them into the authOptions configuration for next-auth. The code implementation I have is as follows: export const buildAuthOptions = async () => { const secrets: AuthSecrets = await getS ...

javascripttypescriptnext.jsnext.js13next-auth

Analyzing the elements of an array in JavaScript and making modifications to it based on their values

Looking for a Solution Current Data- id price 1001 200 1001 150 1002 300 1003 50 1002 70 1004 30 Desired Outcome id price 1001 350 1002 370 1003 ...

javascriptarraysangular

Compilation error in VueJS: missing dependency detected

I am facing an issue in my VueJS project where a file I am referencing seems to be causing a compilation error. Despite being present in the node_modules directory, the dependency is declared as not found. In the image on the left, you can see the directo ...

typescriptvue.jsnpmgoogle-cloud-firestore