Угловой шаблон ng с формой класса CSS

Question

У меня есть ng-шаблон, который перебирает массив для создания некоторых элементов управления на странице. Все работает нормально, но по некоторым причинам класс 'focus' не применяется автоматически к сфокусированному элементу управления, как это происходит, когда элемент управления находится за пределами ng-шаблона.

<ng-template ngFor let-parentral [ngForOf]="plan.nutrition.parentral" let-parentralIndex="index">
     <div class="row">
         <div class="col-sm-3">
             <div class="form-group form-float">
                 <div class="form-line">  <-----Focused css class needs to be added here
                    <input type="number" [(ngModel)]="parentral.rate" name="rate" class="form-control" min="0" />
                    <label for="rate" class="form-label">ml/hr</label>
                 </div>
             </div>
         </div>
     </div>
</ng-template>
<button type="button" (click)="addParentral()">Add</button>