How to add css class to input box / radio button on clicking button in angular

You can add class in event handler of submit click. sample working code (target whichever element you want class added to instead of .col-md-4) - https://stackblitz.com/edit/angular-j94h2r

  submit(): void {
    const eles = this.formContainer.nativeElement.querySelectorAll('.col-md-4');
    eles.forEach(ele => ele.classList.add('shake'));
  }

I think the easiest thing to do would be to add the styles for the shaking effect to the :active pseudoselector.

input:active {
   // css for shaking the radio button
}

You have to add a check to your ngClass statement.

As an example you can use the same check as used for a click.

e.g.:

<label *ngFor="let radiobutton of radioItems">
  <div>
  <input type="radio" name="options" (click)="model.option = radiobutton"
    [checked]="radiobutton === model.option"
    [ngClass]="{'rederror': radiobutton === model.option}">{{radiobutton}}  
  </div>
</label>
<p>

see this working Stackblitz

Edit here comes your complete example:

html:

<div class="modal-body">
    <div class="row">
        <div class="col-md-4 col-md-offset-3 text-center">
            <input formControlName="genderName" type="radio" id="female" (click)="selectedOption=female" value="female"
                [ngClass]="{'rederror': selectedOption===female && shake}" [checked]="selectedOption===female">
            <label for="female" class="female">Female</label>
        </div>
        <div class="col-md-4 col-md-pull-1 ml-4">
            <input formControlName="genderName" type="radio" id="male" (click)="selectedOption=male"
                [checked]="selectedOption===male" [ngClass]="{'rederror': selectedOption===male && shake}">
            <label for="male" class="male">Male</label>
        </div>
        <button type="button" (click)="submit()">Next</button>
    </div>
</div>

components:

import { Component,  } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public male = "Male";
  public female = "Female";
  public selectedOption = this.female;
  public shake = false;

  public submit() {
    this.shake = true;    
    setTimeout(() => this.shake = false, 500);
  }
}

Together with the working Stackblitz!