<app-checkbox-input 
   formControlName="fullName" 
   label="Check by Full Name" 
></app-checkbox-input>

...A component with customizable animations might look like this...

// collapse.ts

const closedStyle = style({ 
  height: 0 
});

const openStyle = style({ 
  height: '*' 
});

const timings = '{{duration}}ms linear';

const defOptions: AnimationOptions = { 
  params: { 
   duration: 300 
  } 
};

export const collapse = trigger('collapse', [
  transition(
    ':enter',
    animation([closedStyle, animate(animateTimings, openStyle)]),
    defaultOptions
  ),
  transition(
    ':leave',
    animation([openStyle, animate(animateTimings, closedStyle)]),
    defaultOptions
  ),
]);

// bonus.component.ts

@Component({
  animations: [collapse],
  host: {
    '[@collapse]': 'animationOptions',
  },
})
export class BonusComponent implements OnInit {
  @Input() public duration = 300;
  public options!: IAnimationOptions<string>

  public ngOnInit(): void {
    this.options = {
      value: '_',
      params: { 
         duration: this.duration 
      },
    };
  }
}