How to conditionally set required attribute in Angular 7

Question

I want to apply required on certain conditions. I used the [required]= "condition" but didn't work Here I want to apply required attribute when outlookName.outlookActionName==='Assigned' where outlook name is a dropdown and assigned is one of the value in the dropdown

<select
  class="form-control"
  required
  name="ratingOutlook"
  [(ngModel)]="ratingOutlook"
>
  <option
    *ngFor="let outlookName of searchCriteriaForm?.outlookDetails,index as i"
    [value]="outlookName.outlookId"
    >{{outlookName.outlookName}}</option
  >
</select>

<div class="form-group" *ngIf="outlookCheck">
  <label for="outlookFromDate">Outlook: From Date</label>
  <input
    class="form-control"
    autocomplete="off"
    name="outlookFromDate"
    type="text"
    required
    placeholder=""
    #dp="bsDatepicker"
    bsDatepicker
    [(ngModel)]="outlookFromDate"
    [bsConfig]="{ dateInputFormat: 'DD-MMM-YYYY',showWeekNumbers: false ,containerClass: colorTheme  }"
    (ngModelChange)="validateOutlookDate()"
  />
</div>

Answer 1

Please try [attr.required]="yourBooleanVariable"