CODEWITHSUNDEEP
angular
Abhishek Prakash
Abhishek Prakash

Reputation: 964

How to use ngSwitch in angular2

Since last two days I am trying to get ngSwitch to work in Angular 2.1.0. But it seems impossible to get it work.

I always get:

No provider for NgSwitch

Below is my code:

Template: 

<template [ngSwitch]="buttonSelector">
  <a class="btn" [ngClass]="buttonSizeClass" *ngSwitchCase="'link'" href="#">
    <span class="btn__text">
      <ng-content></ng-content>
    </span>
  </a>
</template>

Component:

import { Component, OnInit, Input } from '@angular/core';


@Component({
  selector: 'app-inked-btn',
  templateUrl: './inked-btn.component.html',
  styleUrls: ['./inked-btn.component.css'],
  inputs: ['buttonSize', 'buttonType', "buttonSelector"]
})
export class InkedBtnComponent implements OnInit {
  public buttonSize: string;
  public buttonType: string;
  public buttonSelector: string;
  public buttonSizeClass: any;

  constructor() { }

  ngOnInit() {
    this.buttonSizeClass = {
      'btn--lg': this.buttonSize === 'large',
      'btn--sm': this.buttonSize === 'small',
      'btn--primary': this.buttonType === 'primary'
    }
  }

}

Below is my module configuration: 

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { InkedBtnComponent } from './inked-btn/inked-btn.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [HeaderComponent, FooterComponent, InkedBtnComponent],
  exports: [HeaderComponent, FooterComponent, InkedBtnComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SharedModule { }

This shared module is then imported in the main module.

Where is the miss?

Upvotes: 19

Views: 23100

Answers (3)

Pranoy Sarkar
Pranoy Sarkar

Reputation: 2233

Also facing the same issue Make sure

  1. NgSwitch should not be no template it should be on real element like Div
  2. *ngSwitchCase="expression" should be nested inside NgSwitch element

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html

ngSwitch can't be on a <template> element, only on real elements like <div>

Only ngSwitchCase can be applied to <template> elements

<template [ngSwitchCase]="match_expression_3">

Alternatively since final ng-container can be used instead of <template> with the more common syntax: 

<ng-container *ngSwitchCase="match_expression_3">

Upvotes: 35

Arun Ghosh
Arun Ghosh

Reputation: 7734

You need to import ngSwitch from angular2/common

import {NgSwitch} from 'angular2/common'

Upvotes: 2

Related Questions