jrSwitchCases

switch-cases.directive.ts

import { Directive, Input, Host, TemplateRef, ViewContainerRef, OnInit, DoCheck } from '@angular/core';
import { NgSwitch } from '@angular/common';

@Directive({
  selector: '[jrSwitchCases]'
})
export class SwitchCasesDirective implements OnInit, DoCheck {
  private ngSwitch: any;
  private _created = false;

  @Input()
  jrSwitchCases: any[];

  constructor(
    private viewContainer: ViewContainerRef,
    private templateRef: TemplateRef<Object>,
    @Host() ngSwitch: NgSwitch
  ) {
    this.ngSwitch = ngSwitch;
  }

  ngOnInit() {
    (this.jrSwitchCases || []).forEach(() => this.ngSwitch._addCase());
  }

  ngDoCheck() {
    let enforce = false;
    (this.jrSwitchCases || []).forEach(value => enforce = this.ngSwitch._matchCase(value) || enforce));
    this.enforceState(enforce);
  }

  enforceState(created: boolean) {
    if (created && !this._created) {
      this._created = true;
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else if (!created && this._created) {
      this._created = false;
      this.viewContainer.clear();
    }
  }
}

Cool

nice! :)

There is one extraneous closing parenthesis at the end of line 28.

Can't wait for this feature to be addressed in Angular (angular/angular#14659), in the mean time, thanks for sharing!

Hi all,

I found an other, more complex, issue.

If you have a default in you switch, the element of your default directive will be instanciated and then destroyed right after.
This is caused by the fact that we have to wait for the input property to be passed to the directive before adding the new cases in
jonrimmer directive. But in angular case directive, the case is added directly in the constructor.

To fix this issue, you simply have to set this.ngSwitch._defaultUsed to true in the constructor and then set it to false in the ngOnInit. This will prevent ngSwitch from switching to default before the cases are added.

Note that this means that at initialization, there will be a moment where the switch will not render anything even tho you specified a default element.

Works well, thanks ❤️

Thanks for sharing! :)