Multiple classes in angular components for different logic

Question

I have two different logics in the same component, for eg if some useApimApi=true then the page content needs to be different and if useApimApi=false then I need to show different content, how can i couple logic in a single component. I can use if else but there will be lot of chaining and I want to avoid it.

I got some idea from useClass and useFactory Dependency Injection, so i thinking of declaring two classes in my angular component and based on which I can run the particular class. I maybe totally wrong :3. Here's what i am thinking

some-component.ts

import { HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms'
import { Router } from '@angular/router';
import { CookieService } from 'ngx-cookie-service';
import { LoaderService } from 'src/app/services/loader.service';

@Component({
  selector: 'app-some-page',
  templateUrl: './some-page.component.html',
  styleUrls: ['./some-page.component.scss']
})
export class SomePageComponent implements OnInit {

// Code logic 1 defined in this class block 

  ngOnInit(): void {
    });
}


export class SomePageComponent2 implements OnInit {

// Code logic 2 defined in this class block 

  ngOnInit(): void {
    });
}

app.module.ts

import { ApiConfig } from '../app/model/apiConfig';
import { API_CONFIG_TOKEN } from './token';
import { environment } from 'src/environments/environment';
import { LoadingSpinnerComponent } from './some/loading-spinner/loading-spinner.component';

const host=environment.host;
const apigURL=environment.apigURL;

@NgModule({
  declarations: [
    AppComponent,
    OptOutPageComponent,
    OptConfirmScreenComponent,
    LoadingSpinnerComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    CommonCoreModule,
    HttpClientModule,
  ],
  providers: [
    {
      provide:API_CONFIG_TOKEN, useValue:{
        useApimApi:false,
      } as unknown as ApiConfig
    },
    CookieService,
    DatePipe,
    LoaderService,
    someService,
    {provide:HTTP_INTERCEPTORS,useClass:GlobalHttpInterceptorService,multi:true}
  ],
  bootstrap: [AppComponent]
},
)
export class AppModule { }

Answer 1

I think that the right way to address this is having 2 separate components that you render conditionally via selector in SomePageComponents.

Something like this:

<div *ngIf="useApimApi">
  <app-child1></app-child1>
</div>

<div *ngIf="!useApimApi">
  <app-child2></app-child2>
</div>

I have used <div> tags and *ngIf twice just for simplicity. Of course you could do it better or adapt it to your needs.

<ng-container *ngIf="useApimApi; else child2">
  <app-child1></app-child1>
</ng-container>

<ng-template #child2>
  <app-child2></app-child2>
</ng-template>

That would be the template of your SomePageComponents and in this way you could isolate the logic of <app-child1> from <app-child2>. Then the only responsability of SomePageComponents is to know wich one render.