Angular Code Generation and injecting CSS

One aspect of code generation is injecting CSS at run time. Angular does this automatically by employing View Encapsulation which is just a fancy name for 'Use the component view's CSS first'.

But let's assume we are creating our components based on JSON only; which means we are bypassing the Angular component CSS system, like this:

     { 
       propertyName: "Log Errors", 
        type: "checkbox", 
        checked: false },
     { 
       propertyName: "Send Email on Failure",
        type: "checkbox",
        checked: false
     },
     { 
       propertyName: "Job 4 max duration",
        type: "duration",
        time: "01:02:10",
        style: { height: "6em" }
     },

Our duration control looks like this when rendered:

It needs to have a height specified because the auto-generated HTML markup looks like this:

<div *ngIf="control.type === 'duration'">
   <div [ngStyle]="control.style">
      <input
         type="number"
         min="0"
         max="24"
         placeholder="HH"
         (change)="onHoursChanged()"
         value="{{ onGetHours(control.time) }}"
      />
      <input
         type="number"
         min="0"
         max="59"
         placeholder="MM"
         (change)="onMinutesChanged()"
         value="{{ onGetMinutes(control.time) }}"
      />
      <input
         type="number"
         min="0"
         max="59"
         placeholder="SS"
         (change)="onSecondsChanged()"
         value="{{ onGetSeconds(control.time) }}"
      />
   </div>
</div>

If we don't have a height then the next control in the layout will override the view area of the duration control.

We use [ngStyle] to inject the height based on the control.style property, which is shown in the JSON above. It's simply an object which contains style markup like this:

style: { height: "6em" }

It's not intuitive that it should work like that but this is how Angular's nGstyle works! The brackets [nGstyle] means to interpolate the string that follows, e.g use the value of control.style as control.style is NOT a literal string representation it's the name of a variable.

JWP2020