[Fixed] I need to conditionally render an angular component based on users selection


I need to show the aprs-attachments only when hostSection/environments ‘PCCL (Production)’ is selected. Below is how I have my current code set up. I can’t figure out how to declare the *ngif statement to only show the aprs-attachments when PCCL is selected in the app. Currently if any environment is selected it’s visible. Also I need the aprs_attachments to be removed if the environment is unchecked.


export class HostComponent implements ControlValueAccessor {
constructor(private fb: FormBuilder) {}

hostSection = this.fb.group({
tso: '',
environments: '',
businessCase: '',
additionalAccess: '',

environments = [
{ label: 'PCCL (Production)' },
{ label: 'PCCLT (Production Training)' },
{ label: 'SPCCL  (Systems Test)' },
{ label: 'TPCCL (IMS Test)' },
{ label: 'VPCCL (IA and MO)' },

tsoRegions = [{ label: 'TSO H1' }, { label: 'TSO H2' }];

// ControlValueAccessor implementation
public onTouched: () => void = () => {};
writeValue(val: any): void {
val && this.hostSection.patchValue(val, { emitEvent: false });
registerOnChange(fn: any): void {
registerOnTouched(fn: any): void {
this.onTouched = fn;
setDisabledState?(isDisabled: boolean): void {
isDisabled ? this.hostSection.disable() : this.hostSection.enable();


<form [formGroup]="hostSection">
<div class="tds-container">
<div class="tds-row">
  <div class="tds-col-md-auto">
  <div class="tds-col-md-auto">
    <aprs-checkbox-group legendTitle="TSO" [checkboxes]="tsoRegions" 
<div class="tds-row">
  <div class="tds-col-lg-10 tds-col-xl-8">
    <div class="tds-field">
      <label class="tds-field__label"
        >Additional Host Access Details
        <textarea class="aprs-textarea" formControlName="additionalAccess"> 
    <div class="tds-field">
      <label class="tds-field__label"
        >Business Case
        <textarea class="aprs-textarea" formControlName="businessCase" 
        <span class="tds-field__label">Manager Approval (required for PROD) 


When you set your form the control ‘environments is empty. Assuming you want your environments array inside of that control you would do:

hostSection = this.fb.group({
   environment: this.fb.control(this.environments)

In your template you would then check


The problem with this way is that it is not very dynamic. A better approach would be to instansiate a ‘environments’ as a formArray type like so:

hostSection = this.fb.group({
   environment: this.fb.array([])

Then you’d create a method and ngOninit to push each instance onto that array:

pushValuesOfEnvironment() {
let formArray = this.hostSection.get('environment') as FormArray;
this.environments.forEach(value => {
  (this.hostSection.get('environment') as FormArray).push(this.fb.control(value.label))

Use this stackblitz as an example. You’ll see that when the user selects production that string will display:

Leave a Reply

(*) Required, Your email will not be published