What is the best way to dynamically load two child components in Angular 8 based on certain conditions?

Question

What is the best way to dynamically load two child components in Angular 8 based on certain conditions?

Imagine the following structure:

<app-component>
    <university-component></university-component>
    <highSchool-component></highSchool-component>
</app-component>

Now, there is a dialog component (dialog-component) within app-component that presents 2 options: university and high school:

<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <h3> Please select your academic level </h3>
            <nz-form-control [nzErrorTip]="getErrorTip('studentLevel')">
              <nz-radio-group [(ngModel)]="radioValue" formControlName="studentLevel" nzButtonStyle="solid" nzSize="small">

                  <input type="radio" name="radio3" id="university" (change)="setRouter(2)">
                      <label class="universite-label four col" nzValue="universite" for="universite">University</label>
                  <input type="radio" name="radio3" id="highSchool" (change)="setRouter(1)">
                      <label class="lycee-label four col" nzValue="lycee" for="lycee" >High School</label>

              </nz-radio-group>
            </nz-form-control>>
            
       <div>
       <label nzType="flex" nzJustify="center" nzAlign="middle" nz-radio-button (click)="changeRoute()" mat-dialog-close >GO</label>
       </div>

</form>

If I select University, how can I make app-component load university-component, and if I choose High School, how can I make app-component load highSchool-component?

angular typescript angular8 angular-services angular-data

Answer 1

Answer №1

It seems like radioValue is already linked to ngModel, allowing you to implement the following code snippet. This assumes that AppComponent has the necessary access to radioValue.

<app-component>
  <university-component *ngIf="radioValue === 'universityComponentVal'"> </university-compnent>
  <high-school-component *ngIf="radioValue === 'highSchoolVal'"></high-school-component>
</app-component>

If more conditionally rendered components need to be managed, consider utilizing ngSwitch and ngSwtichCase. https://angular.io/api/common/NgSwitchCase

Answer 2

It seems like radioValue is already linked to ngModel, allowing you to implement the following code snippet. This assumes that AppComponent has the necessary access to radioValue.

<app-component>
  <university-component *ngIf="radioValue === 'universityComponentVal'"> </university-compnent>
  <high-school-component *ngIf="radioValue === 'highSchoolVal'"></high-school-component>
</app-component>

If more conditionally rendered components need to be managed, consider utilizing ngSwitch and ngSwtichCase. https://angular.io/api/common/NgSwitchCase

Answer 3

Answer №2

In my opinion, opting for routes instead of ngIf would be a better approach in this scenario, especially if there are shared variables with the parent component. Using routes not only provides a cleaner solution but also enables deep linking for improved user experience by eliminating the need to select a value repeatedly.

export const appRoutes: Routes = [
  ... Include any other existing routes
  {
    path: 'university',
    component: UniversityComponent,
  },
  {
    path: 'highSchool',
    component: HighSchoolComponent
  }
};

@NgModule({
  imports: [
    ...
    RouterModule.forRoot(appRoutes)
  ]
})
export class AppModule {}

You can navigate to these routes either from the HTML using Angular's routerLink directive or from the function triggered by the form.

@Component({
  ...
})
export class AppComponent {
  radioValue: 'university' | 'highSchool';
 
  constructor(private router: Router) {}

  changeRoute() {
    this.router.navigate([this.radioValue]);
  }
}

It appears that you are combining formControlName with ngModel, which may lead to errors. The suggested method utilizes the value from ngModel; similarly, you can access the form value in the same manner.

Answer 4

In my opinion, opting for routes instead of ngIf would be a better approach in this scenario, especially if there are shared variables with the parent component. Using routes not only provides a cleaner solution but also enables deep linking for improved user experience by eliminating the need to select a value repeatedly.

export const appRoutes: Routes = [
  ... Include any other existing routes
  {
    path: 'university',
    component: UniversityComponent,
  },
  {
    path: 'highSchool',
    component: HighSchoolComponent
  }
};

@NgModule({
  imports: [
    ...
    RouterModule.forRoot(appRoutes)
  ]
})
export class AppModule {}

You can navigate to these routes either from the HTML using Angular's routerLink directive or from the function triggered by the form.

@Component({
  ...
})
export class AppComponent {
  radioValue: 'university' | 'highSchool';
 
  constructor(private router: Router) {}

  changeRoute() {
    this.router.navigate([this.radioValue]);
  }
}

It appears that you are combining formControlName with ngModel, which may lead to errors. The suggested method utilizes the value from ngModel; similarly, you can access the form value in the same manner.

Answer 5

Answer №3

I want to express my gratitude for all the helpful responses,

After much trial and error, I finally discovered the solution. I decided to create a new service called "level.service.ts" :

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LevelService {

  isCollegeStudent: boolean = true;

  constructor() { }

  highSchool() {
    this.isCollegeStudent = false;
  }

  university() {
    this.isCollegeStudent = true;
  } 
}

Then, in the main app-component file:

<app-component>
    <university-component *ngIf="levelService.isCollegeStudent"></university-component>
    <highSchool-component *ngIf="!levelService.isCollegeStudent"></highSchool-component>
</app-component>

In addition, I made modifications to dialog.component.html involving two (click) methods:

<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <h3> Kindly indicate your current academic level </h3>
            <nz-form-control [nzErrorTip]="getErrorTip('studentLevel')">
              <nz-radio-group [(ngModel)]="radioValue" formControlName="studentLevel" nzButtonStyle="solid" nzSize="small">

                  <input type="radio" name="radio3" id="university" (change)="setRouter(2)">
                      <label class="universite-label four col" nzValue="universite" for="universite" (click)="university()">University</label>
                  <input type="radio" name="radio3" id="college" (change)="setRouter(1)">
                      <label class="college-label four col" nzValue="college" for="college" (click)="highSchool()">College/Campus</label>

              </nz-radio-group>
            </nz-form-control>
            
       <div>
       <label nzType="flex" nzJustify="center" nzAlign="middle" nz-radio-button (click)="changeRoute()" mat-dialog-close >GO</label>
       </div>

</form>

Lastly, I refined the functionality of dialog.component.ts as follows:

import { Component} from '@angular/core';
import { UniversityService } from 'src/app/services/university.service';
// other imports

@Component({
  selector: 'app-dialog-video',
  templateUrl: './dialog-video.component.html',
  styleUrls: ['./dialog-video.component.css']
})

export class DialogVideoComponent implements OnInit {

  @Input() radioValue = 'school'

  isCollegeStudent: string = 'college';

  // constructor() { } 
 
 // additional operations

  ngOnInit() {
    // this.universityService.isCollegeStudent = this.radioValue;
    this.universityService.collegeCampus(),
    this.universityService.universite()
  }

  highSchool() {
    this.universityService.collegeCampus();
  }

  university() {
    this.universityService.universite();
  }

}

Answer 6

I want to express my gratitude for all the helpful responses,

After much trial and error, I finally discovered the solution. I decided to create a new service called "level.service.ts" :

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LevelService {

  isCollegeStudent: boolean = true;

  constructor() { }

  highSchool() {
    this.isCollegeStudent = false;
  }

  university() {
    this.isCollegeStudent = true;
  } 
}

Then, in the main app-component file:

<app-component>
    <university-component *ngIf="levelService.isCollegeStudent"></university-component>
    <highSchool-component *ngIf="!levelService.isCollegeStudent"></highSchool-component>
</app-component>

In addition, I made modifications to dialog.component.html involving two (click) methods:

<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <h3> Kindly indicate your current academic level </h3>
            <nz-form-control [nzErrorTip]="getErrorTip('studentLevel')">
              <nz-radio-group [(ngModel)]="radioValue" formControlName="studentLevel" nzButtonStyle="solid" nzSize="small">

                  <input type="radio" name="radio3" id="university" (change)="setRouter(2)">
                      <label class="universite-label four col" nzValue="universite" for="universite" (click)="university()">University</label>
                  <input type="radio" name="radio3" id="college" (change)="setRouter(1)">
                      <label class="college-label four col" nzValue="college" for="college" (click)="highSchool()">College/Campus</label>

              </nz-radio-group>
            </nz-form-control>
            
       <div>
       <label nzType="flex" nzJustify="center" nzAlign="middle" nz-radio-button (click)="changeRoute()" mat-dialog-close >GO</label>
       </div>

</form>

Lastly, I refined the functionality of dialog.component.ts as follows:

import { Component} from '@angular/core';
import { UniversityService } from 'src/app/services/university.service';
// other imports

@Component({
  selector: 'app-dialog-video',
  templateUrl: './dialog-video.component.html',
  styleUrls: ['./dialog-video.component.css']
})

export class DialogVideoComponent implements OnInit {

  @Input() radioValue = 'school'

  isCollegeStudent: string = 'college';

  // constructor() { } 
 
 // additional operations

  ngOnInit() {
    // this.universityService.isCollegeStudent = this.radioValue;
    this.universityService.collegeCampus(),
    this.universityService.universite()
  }

  highSchool() {
    this.universityService.collegeCampus();
  }

  university() {
    this.universityService.universite();
  }

}

What is the best way to dynamically load two child components in Angular 8 based on certain conditions?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to reset a setInterval ID in Angular?

Caution: Ensuring that every child item in a list possesses a distinct "key" prop is crucial when working with React in TypeScript

Exploring the Comma Operator in Typescript

Angular synchronous observables are designed to provide real-time data

How to prevent or disable the hardware back button on an Ionic 4 device

Obtaining a TemplateRef from a directive: The process explained

Combining Promises in Typescript to create a single Promise

What is the reason behind line-height not affecting the clickable area when reduced?

What causes the website to malfunction when I refresh the page?

Encountering an issue with subscribing wait times

Ag-grid allows for the creation of multiple individual detail grids that are connected to a single

Error: Missing provider for String value

What sets apart npm correlation-id from uuid?

Showing a ng2-pdf-viewer PDF contained within a stream

Why is it important to understand the role of ngOnInit() in Angular?

Displaying the default value in a Material-UI v5 select component

What is the significance of mapping transformations on objects within MongoDB?

Utilizing Angular 2 or TypeScript to Retrieve Visitor's Location

Looking to retrieve the selected item from the list using console.log

Issues arise when attempting to use the Android KeyUp, KeyDown, and KeyPress events in conjunction with Angular2