How directives can prevent a component to construct?

Question

So I'm trying to create a directive that would work with feature flags, not sure if my idea is going in the right direction but what I want to achieve is to have logic that decides if a component should load or not, and make my entire app to follow my directive as a development-policy.

I created a directive that receives a flagName and a value, can be used like this:

<div featureFlagCheck flagName='componentVersion' flagValue='v1'>
 <app-comp1>..
</div>

The directive code will check if the flag v1 is current or not, and act accordingly, no issues there, but let's say the current flag value is "2", so the entire DIV should not be shown.

I'm trying this:

    this.elementHref.nativeElement.style.display = 'none';

The component is hidden, but the problem is that this statement does not prevents CONSTRUCTOR of my app-comp1 to load, If the directive says you are not up, then it should not even load.

I know this can be made by using *ngIf like this example below, the ngIf prevents the constructor to load:

<div *ngIf="checkFlagIs('v1')">

anybody can point me what could be ngIf doing internally to prevent component to load?

If you want to manage if a component is loaded or not, why not handle that with routes? route1 renders component1, route2 renders component2,,, I would follow this approach if component1 handles a different logic than component2 and somewhat they are in different modules, In your case, I have no idea of what logic business your components are supposed to handle. — Andres2142, Aug 06 '22 at 21:50
ngIf is a structural directive. You might be able to define a custom one that does what you want. See the documentation here: https://angular.io/guide/structural-directives#structural-directive-syntax-reference — Liel Fridman, Aug 06 '22 at 21:50
Also, `ngIf` is a structural directive, which means it has the ability to **add** an element to the DOM or to **remove** it. — Andres2142, Aug 06 '22 at 21:52
[This dude has a pretty good solution](https://betterprogramming.pub/creating-a-structural-directive-similar-to-ngif-in-angular-4709bac8044b) — Donald Duck, Aug 06 '22 at 22:27
Indeed @DonaldDuck, that helped to build my final implementation. Thanks. — Yogurtu, Aug 08 '22 at 19:15

score 1 · Accepted Answer · answered Aug 07 '22 at 04:46

1

If you want to do smth like *ngIf -- you can just copy-paste code from angular source https://github.com/angular/angular/blob/12.1.x/packages/common/src/directives/ng_if.ts, just change directive inputs and remove unneeded code like ngIfElse.

Another way is to extend directive class, smth like:

class Feature extends NgIf implements OnChanges {
  @Input() feauture;
  @Input() feautureValue;

  ngOnChanges() {
    this.ngIf = this.feautureFactory.checkValue(this.feature, this.featureValue)
  }
}

<div *feature="myName" [featureValue]="someValue"></div>

answered Aug 07 '22 at 04:46

Petr Averyanov

9,327
3
20
38

I figured out from another post the logic within ngIf, your approach to extend looks also like a good idea, @donald duck also helped but is similar to this answer in a way or another. Basically I solved it by making my directive as structural, and applying same logic that the NgIf to render/clear the inner html. It works very well now. – Yogurtu Aug 08 '22 at 19:14

How directives can prevent a component to construct?

1 Answers1