I was watching turtorial and was trying to do what I learned.I got an error below.I couldn't understand why I have this error message on the browser console.It says [ERROR ->]<span *ngSwitchCase="true"> but I don't know why it says ngSwitchCase is wrong.Checked all files and code but seems no problem.Where's my mistake?

ERROR

Uncaught Error: Template parse errors:
No provider for NgSwitch ("       <td>{{item.description}}</td>
              <td [ngSwitch]="item.action"></td>
              [ERROR ->]<span *ngSwitchCase="true">
                  Yes
              </span>
"): ng:///AppModule/AppComponent.html@25:14
No provider for NgSwitch ("
                  Yes
              </span>
              [ERROR ->]<span *ngSwitchCase="false">
                  No
                </span>
"):

appponent.html

  <table class="table table-striped table-bordered">
                <thead>
                   <tr>
                     <th></th>
                     <th>Description</th>
                     <th>Action</th>
                   </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of items;let i=index">
                  <td>{{i+1}}</td>
                  <td>{{item.description}}</td>
                  <td [ngSwitch]="item.action"></td>
                  <span *ngSwitchCase="true">
                      Yes
                  </span>
                  <span *ngSwitchCase="false">
                      No
                    </span>
                </tr>
                </tbody>
              </table>

apponent.ts

export class AppComponent {

  items:Model[]= [
    new Model('Breakfast',false),
    new Model('Sport',false),
    new Model('Studying',true),
    new Model('Cemo',false),
  ]
}

Model.ts

export class Model
{
   description:string;
   action:Boolean;
   constructor(description:string,action:Boolean)
   {
       this.description=description;
       this.action=action;
   }
}

I was watching turtorial and was trying to do what I learned.I got an error below.I couldn't understand why I have this error message on the browser console.It says [ERROR ->]<span *ngSwitchCase="true"> but I don't know why it says ngSwitchCase is wrong.Checked all files and code but seems no problem.Where's my mistake?

ERROR

Uncaught Error: Template parse errors:
No provider for NgSwitch ("       <td>{{item.description}}</td>
              <td [ngSwitch]="item.action"></td>
              [ERROR ->]<span *ngSwitchCase="true">
                  Yes
              </span>
"): ng:///AppModule/AppComponent.html@25:14
No provider for NgSwitch ("
                  Yes
              </span>
              [ERROR ->]<span *ngSwitchCase="false">
                  No
                </span>
"):

app.ponent.html

  <table class="table table-striped table-bordered">
                <thead>
                   <tr>
                     <th></th>
                     <th>Description</th>
                     <th>Action</th>
                   </tr>
                </thead>
                <tbody>
                <tr *ngFor="let item of items;let i=index">
                  <td>{{i+1}}</td>
                  <td>{{item.description}}</td>
                  <td [ngSwitch]="item.action"></td>
                  <span *ngSwitchCase="true">
                      Yes
                  </span>
                  <span *ngSwitchCase="false">
                      No
                    </span>
                </tr>
                </tbody>
              </table>

app.onent.ts

export class AppComponent {

  items:Model[]= [
    new Model('Breakfast',false),
    new Model('Sport',false),
    new Model('Studying',true),
    new Model('Cemo',false),
  ]
}

Model.ts

export class Model
{
   description:string;
   action:Boolean;
   constructor(description:string,action:Boolean)
   {
       this.description=description;
       this.action=action;
   }
}

• javascript
• html
• css
• angular

Share Improve this question Follow asked Jul 25, 2019 at 7:07 Timuçin ÇiçekTimuçin Çiçek 1,62633 gold badges2424 silver badges5151 bronze badges 2

• tryto do like this: [ngSwitch]="{{item.action}}" – Shivani Sonagara Commented Jul 25, 2019 at 7:14
• @ShivaniPatel I did but didn't work – Timuçin Çiçek Commented Jul 25, 2019 at 7:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You should wrap you span inside td tag like this because ngSwitch directive is scope to td element not outside td element

<td [ngSwitch]="item.action">
    <span *ngSwitchCase="true">
              Yes
    </span>
    <span *ngSwitchCase="false">
            No
    </span>
  </td>

If you only have to decide between one of two alternatives, you could use *ngIf-else as well: https://ultimatecourses./blog/angular-ngif-else-then

you should apply [ngSwitch] on the parent element first to behave as a container to your switch cases and "provide" you with the condition you are checking/paring to, to apply/display any of your switch cases in the child elements which met the condition of the parent of any type(property/field/method/function).

so the parent element work as a "Provider"

ERROR: No provider for NgSwitch found in NodeInjector.

<div>
    <p *ngSwitchCase="true">
              Yes
    </p>
    <p *ngSwitchCase="false">
            No
    </p>
</div>

with provider & no errors:

<div [ngSwitch]="something">
    <p *ngSwitchCase="true">
              Yes
    </p>
    <p *ngSwitchCase="false">
            No
    </p>
</div>