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

Do [(ngModel)] bindings strictly adhere to being strings?

Imagine a scenario where you have a radiobutton HTML element within an angular application, <div class="radio"> <label> <input type="radio" name="approvedeny" value="true" [(ngModel)]=_approvedOrDenied> Approve < ...

javascriptangulartypescript

Having trouble with the lodash find function in my Angular application

npm install lodash npm install @types/lodash ng serve import { find, upperCase } from 'lodash'; console.log(upperCase('test')); // 'TEST' console.log(find(items, ['id', id])) // TypeError: "Object(...)(...) is un ...

javascriptangulartypescriptlodash

Troubleshooting: Angular Firebase's signInWithRedirect() and getRedirectResult() functions are experiencing technical difficulties

Within my AuthService, I have implemented a function for signing in with Google which, depending on the user's device, initiates the sign-in process either with a redirect or a pop-up. The pop-up sign-in functionality is operating smoothly, however, ...

angularfirebasefirebase-authenticationangularfire2

Pass attribute names dynamically to a component in Angular 2 using a variable

Is there a way to pass data into a component while also storing the attribute name in a variable? For example: <app-note-form-sticky [foreign_key_column]="foreign_key_value"></app-note-form-sticky> In this case, "foreign_key_column" is the va ...

angular

Error: Firebase has encountered a network AuthError, which could be due to a timeout, interrupted connection, or an unreachable host. Please try again later. (auth/network-request-failed

I have set up my Angular app to utilize Firebase's emulators by following the instructions provided in this helpful guide. In my app.module.ts, I made the necessary configurations as shown below: import { USE_EMULATOR as USE_AUTH_EMULATOR } from &apos ...

javascriptangularfirebase-authenticationfirebase-tools

typescript page objects in protractor are showing an undefined property

Hey there, I'm facing an issue while using POM in Protractor with TypeScript in Angular CLI. The error I'm encountering is "Cannot read property 'sendUsername' of undefined". Since I'm new to TypeScript, can someone guide me on how ...

angulartypescriptjasmineangular-clipageobjects

What is the name of the file that contains a class?

I am curious about identifying the file that called a specific class: database.ts class Database { constructor() { console.log(`I want to know who called this class`); } } server.ts import Database from 'database.ts'; new Databa ...

javascripttypescriptclassoop

Facing unexpected behavior with rxjs merge in angular5

import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/merge'; this.data = this.itemsCollection.valueChanges() this.foo = this.afs.collection<Item>('products') .doc('G2loKLqNQJUQIsDmzSNahlopOyk ...

javascriptangulartypescriptmergerxjs

Encountering an issue with the message: "Property 'ref' is not available on the type 'IntrinsicAttributes'."

Having trouble implementing a link in React and TypeScript that scrolls to the correct component after clicking? I'm using the useRef Hook, but encountering an error: Type '{ ref: MutableRefObject<HTMLDivElement | null>; }' is not assi ...

javascriptreactjstypescript

Angular 2 - synchronizing timer for all users

I have developed a timer that needs to function consistently for all users at the same time. To achieve this, I stored the start_time (timestamp when the timer begins) in my database and implemented the following code snippet to calculate the remaining ti ...

javascriptangularrxjs

Creating a custom class to extend the Express.Session interface in TypeScript

I'm currently tackling a Typescript project that involves using npm packages. I am aiming to enhance the Express.Session interface with a new property. Here is an example Class: class Person { name: string; email: string; password: strin ...

node.jsexpresstypescriptnpmexpress-session

Router navigation does not trigger LifeCycle calls

I currently have the following routes set up: {path:'home', component:HomeComponent, canActivate: [AuthGuard]}, {path:'profile', component:UserProfileComponent, canActivate: [AuthGuard] }, Additionally, in my navbar.component, I hav ...

angularangular2-routinglifecycleangular4-router

Error: AppModule requires an array of arguments in order to function properly

Upon successfully compiling my Angular application and running ng serve, I encountered the following error in the browser console. AppComponent_Host.ngfactory.js? [sm]:1 ERROR Error: Arguments array must have arguments. at injectArgs (core.js:1412) at c ...

javascriptnode.jsangulartypescriptnpm

How to Verify Username in Angular2 and Sails Framework

Currently, I am implementing Angular2 on the front end and Sails.js on the back end. When a user registers, it is necessary to validate whether the chosen username already exists in the database. The backend system developed using Sails will respond with J ...

angularsails.js

Is there a method in typescript to guarantee that a function's return type covers all possibilities?

In the case of having a constant enum like: enum Color { RED, GREEN, BLUE, } A common approach is to create a helper function accompanied by a switch statement, as shown below: function assertNever(x: never): never { throw new Error(`Unexpecte ...

typescript

Poorly packaged library - Custom Angular library - Node Package Manager

Recently, I've been delving into the process of publishing a simple Angular library on NPM. Despite following various tutorials (like those found here, here, and here), I faced difficulties when attempting to use it in a test project. MY JOURNEY In s ...

angulartypescriptnpmangular-library

Is it possible to automatically switch to a different route in a Next.js server component after a certain period of time?

Is it possible to achieve a similar function in an async server component: displaying the ui, waiting 3 seconds, and then redirecting to another route? In a client component, you can accomplish this using: useEffect(() => { function delay(ms: number) ...

reactjstypescriptnext.js

Having trouble with NPM build getting stuck in Azure DevOps

There seems to be a problem similar to the one discussed in this question: npm run build hangs indefinitely on azure. Our build process has been functioning smoothly for several months. However, we are currently facing an issue where npm build is failing ...

angularnpmazure-devopsnpm-build

Experiencing an issue when attempting to deploy Strapi CMS with TypeScript on Railway - encountering the error message: "Unable to locate module 'typescript'"

Issue with Deploying Strapi CMS in TypeScript to Railway Currently facing challenges while trying to deploy Strapi CMS written in TypeScript to Railway. Despite the availability of a JavaScript template, there's a lack of a specific TypeScript templa ...

typescriptdeploymentstrapirailway

What is the best way to transfer information between sibling child components under the same parent in Angular 4?

I am dealing with a parent component A that has two child components B1 and B2. B1 interacts with an API to fetch some data which needs to be consumed by B2. Is there a way to directly pass the data from B1 to B2? If not, what is the best method to transf ...

angular