msarsha

@Component({
    template:`
      <div popover="popoverOne">
        // content
      </div>

      <div popover="popoverTwo">
        // content

msarsha

@Directive({
  selector: '[myDir]'
})
export class MyDirDirective {
  constructor(public template: TemplateRef<any>) {
  }
}

msarsha

export class CaseOne implements CaseLogicHandler{
  key: any = 1;
  doLogic() {
    // case logic
  }
}

export class CaseTwo implements CaseLogicHandler{
  key: any = 2;
  doLogic() {

msarsha

export class CaseOne implements CaseLogicHandler{
  key: any = 1;
  doLogic() {
    // case logic
  }
}

export class CaseTwo implements CaseLogicHandler{
  key: any = 2;

msarsha

@Injectable()
export class NastyService {
  constructor(@Inject(CASE_LOGIC_HANDLER) private caseHandlers: CaseLogicHandler[]) {
  }

  doNastyOperation(key: any) {
    switch (key) {
      case 1:
      // logic
      case 2:

msarsha

@Injectable()
export class NastyService {
  constructor(@Inject(CASE_LOGIC_HANDLER) private caseHandlers: CaseLogicHandler[]) {
  }

  doNastyOperation(key: any) {
    const handler = this.caseHandlers.find(h => h.key === key);
    if (!handler) throw new Error(`No case handler provided for key: ${key}`);
    handler.doLogic();
  }

msarsha

@Injectable()
export class NastyService {
  constructor() {
  }

  doNastyOperation(key: any) {
    switch (key) {
      case 1:
      // logic
      case 2:

msarsha

@NgModule({
  providers: [
    {provide: CASE_LOGIC_HANDLER, useClass: CaseOne, multi: true},
    {provide: CASE_LOGIC_HANDLER, useClass: CaseTwo, multi: true},
    // ...
  ]
})
export class AppModule {
}

msarsha

export interface CaseLogicHandler {
  key: any;
  doLogic();
}

msarsha

export const LOGIC_HANDLER = new InjectionToken<CaseLogicHandler>('logic.handlers');