*ngIf causing custom directive to not work properly-CodePudding

A custom directive applied to both components(1/2)-in-spotlight is not working properly when using *ngIf. The issue resolves when I remove the *ngIf and one of the components that would not show in the current situation/"mode".

In the HTML file using the component (original):

<div>
  <div>
    <div>
      <div>
        <component1-in-spotlight *ngIf="mode===OptionOne"></component1-in-spotlight>
        <component2-in-spotlight *ngIf="mode===OptionTwo"></component2-in-spotlight>
      </div>
    </div>
  </div>
</div>

I found 2 solutions but both aren't effective or proper.

Duplicating the surrounding parent/grandparent components (placing the second case in an <ng-template #elseBlock>) and applying ngIf-else to the top most component (in the oversimplified example, a div) works. But, I'd have a lot of duplicate code and is a terrible solution.

Option 1 (to illustrate since it might be a bit confusing for some). In the HTML file using the component:

<div *ngIf="mode===OptionOne"; else myElseBlock">
  <div>
    <div>
      <div>
        <component1-in-spotlight></component1-in-spotlight>
      </div>
    </div>
  </div>
</div>

</ng-template #myElseBlock>
  <div>
    <div>
      <div>
        <div>
          <component2-in-spotlight></component2-in-spotlight>
        </div>
      </div>
    </div>
  </div>
</ng-template>

Using [hidden] on the 2 components instead of *ngIf seems fine. But there is never a case where the hidden component will be toggled to visible, it's decided upon creation and stays using either of the 2 components until it's destroyed. So, it should just only have one of the 2 components in DOM. Not just hiding it. Plus, that means flipping the logic--[hidden]="mode!==OptionOne". For now, it's just 2 options and seems unlikely more would be added, but I can't guarantee that.

It may seem like these 2 components are the same, so why not just have 1 component and pass in the mode and let the logic decide within the TS file of that component? Well, they both have different services that are injected into the constructor for the component. I was trying that before finding out and remembering that I can't use this before calling super() to decide which service to send up to the base class the component is extending.

Merging the 2 components and using @Input to get the "mode":

In the HTML file using the component:

<div>
  <div>
    <div>
      <div>
        <component-in-spotlight-merged [inputMode]="mode"></component-in-spotlight-merged>
      </div>
    </div>
  </div>
</div>

In the component-in-spotlight-merged TS file--what I tried to do:

export class ComponentInSpotlightMergedComponent extends MyComponentBaseComponent {
  @Input() inputMode: MyEnumType;
  //...

  constructor(
    myService1: MyService1,
    myService2: MyService2,
  ){
    if(this.inputMode === Option1){
      super(myService1);
    }
    else{
      super(myService2);
    }
  }

  //...
}

Using [hidden] can be for a quick fix, but is there a proper way to fix this?

Edit:

Not working meaning: It's a custom directive for tabbing focus between elements and the hotkey logic is binded here. Somehow the hotkey works but the focus is not working as it expected and none of my console.log() are outputted.

Angular 9

CodePudding user response：

You can use Angular NgSwitch directive as shown below.

<div [ngSwitch]="mode">
  <!-- the same view can be shown in more than one case -->
  <component1-in-spotlight *ngSwitchCase="option1">...</component1-in-spotlight>
  <component2-in-spotlight *ngSwitchCase="option2">...</component2-in-spotlight>

  <!--default case when there are no matches -->
  <some-element *ngSwitchDefault>...</some-element>
</div>

CodePudding user response：

The fix was to use setTimeout(() => myCallbackFn(), 0); (on my hotkey bind function that is called in ngAfterViewInit in a component class down the line--a view grandchild?).

I was in a rabbit hole of reading other stackoverflow questions and found How do I combine a template reference variable with ngIf? where a comment mentioned that ngIf takes a tick of time to evaluate. I eventually searched and found How to check whether ngIf has taken effect.