title: Add Class dynamically to checkbox field in Angular
body: <p>I am a beginner in Angular I simply want to achieve that I have a checkbox and i want to set a class on it according to its value i.e if checked set the css class active and if unchecked set class inactive
  HTML</p>
  <pre><code> &lt;div class=&quot;field&quot;&gt;
                      &lt;div class=&quot;center&quot;&gt;
                          &lt;mat-checkbox formControlName=&quot;isDeployed&quot;&gt;Is Deployed&lt;/mat-checkbox&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  <p>TS</p>
  <pre><code>constructor(public formBuilder: FormBuilder, public dialogRef: MatDialogRef&lt;EditComponent&gt;, 
  @Inject(MAT_DIALOG_DATA) public data, 
  private _snackBar: MatSnackBar, public dialog: MatDialog,) { 
  
    this.editForm = this.formBuilder.group({
    id: [{value: '', disabled: true}, Validators.required],
    isDeployed: [{value: false, disabled: true}, null],
  });
  }
  </code></pre>
  <p>I got the checkbox value from data.isDeployed what I need to do if its true set class on html element accordingly.</p>
  <pre><code>    .active{
      color:purple;
             }
      .inactive{
       color:grey;
          }
  </code></pre>