Angular button enabled if the radio button is clicked

I'm new to Angular and I have a question.

This is a study case for my work.

From this screenshot, I need to release (enable) the button « ajouter » when, at least, one radio button is ticked in the safe boot (secure chest, where you put your favorite files used, if you prefer).

On the contrary, I need to disable this button when no radio button is ticked.

The btn ( = button) and the radio component are coded in two specific components I think, with in the subdirectories one .html & .ts .

From the coffre-fort.component, I have :

I need to interact with this element (p-tableRadioButton) to do a loop on the different radio btns & set a flag if the radio btn is clicked or not.

After if the flag is to true, we activate the btn " Ajouter ", is it the good pattern to follow ?

The code of the btn "Ajouter" is in another template:

In the two .ts files, we have the two annotations @Input, @Output & @ViewChild related to the child/father component, but I'm not very familiar with them.

Please, can you advise how to deal with this situation?

Have a nice day,

Let's solve it using a subject.

You must be having a service.ts already, if not create one by using the following command:

ng g s your-service-name

In your service.ts, create a subject like this:

public isRadioButtonClicked = new Subject<boolean>();
fetchStatusOfRadioButton$ = this.isRadioButtonClicked.asObservable();

In your HTML file housing the radio buttons, create a (click) event like this:

(click)="radioButtonClicked()"

In the same component's .ts file, put the below code:

radioButtonClicked(){
    this.isRadioButtonClicked.next(true);
}

In your .ts file housing ajouter button, put the below code in the ngOnInit hook:

 this.your-service-name.fetchStatusOfRadioButton$.subscribe((res)=>!disableAjouterButton=res);

This would automatically disable the Ajouter button if radio button is clicked.

Also, don't forget to unsubscribe using ngOnDestroy hook.