What's the Angular best practice for components that are mostly similar but differ in places?

Question

I'm working on an Angular 5 webapp, a somewhat standard social media portal. It contains pages like a news feed, photo album, events list etc...

I need to add a feature called "Groups". Like any social network group, certain users can join the group. Unlike others, the idea of Groups is that the group members get their own news feed, photo album, events list etc.

This means that there is a lot of similarity between the non-group and group components, but they aren't exactly the same (a different button or div here or there, etc).

I'm new to Angular but not coding. This smells like a situation where I could easily give myself a hard time with a bad design. If I look at traditional OOP, I'd probably use either:

• Composition
• Inheritance

Over:

• Passing an "is_groups" parameter to my component and filling it with if statements
• Copying and pasting large parts of my hierarchy

What's the Angular best practice for this type of situation, where I have components that are similar to others, but differ based on a "state" (groups vs non-groups)?

NB At the moment, the components are probably going to be in different modules (groups being its own module), but this may change if that turns out to be a bad idea, for example if it makes the reuse I'm talking about above difficult.

Answer 1

I can't say it's the best practice since I'm also new to Angular2+ but this has been working for me since I had a similar case in one of my webapp.

In your .ts file, I would add your desired states as boolean:

    state1 = false;
    state2 = false;
    state3 = false;

In your .html file, bind this state to a structural directive to show depending on the state. I used ng-container with *ngIf mostly in all those cases because ng-container does not render if the condition is not met. With that in mind, you could choose to put everything you want between those ng-container without it ever rendering. For this example, a button will display according to your states.

    <ng-container *ngIf="state1">
         <button (click)="function1()"> Bonuses </button>
        <!-- <div> </div> --> // Anything could go here !
    </ng-container>

    <ng-container *ngIf="state2">
         <button (click)="function2()"> Elite Bonuses </button>
         <!-- <div> </div> --> // Anything could go here !
    </ng-container>

    <ng-container *ngIf="state3">
         <button (click)="function3()"> Supreme Bonuses</button>
         <!-- <div> </div> --> // Anything could go here !
    </ng-container>

Of course you would need a logic that toggle the states, but that depends on how you intend to pass those states such as services or which ever you prefer.