I've developed a slider as the parent component with multiple child components.
See the demo here: https://stackblitz.com/edit/angular-ivy-gcgxgh?file=src/app/slide2/slide2.component.html
Slider in the parent component:
<ng-container *ngFor="let ques of current_slide_lists; let i = index">
<div class="mySlides animated fadeInRight">
<app-slide1 *ngIf="ques == 'Multiple choice'"> </app-slide1>
<app-slide2 *ngIf="ques == 'Single choice'"> </app-slide2>
</div>
</ng-container>
Child Component 1:
<p>
Multiple choice Questions :
<br />
<input
#optA
class="form-check-input"
type="checkbox"
name="answer"
id="answer_A"
value="A"
/>
Option 1
<br />
<input
#optB
class="form-check-input"
type="checkbox"
name="answer"
id="answer_A"
value="A"
/>
Option 2
<br />
<input
#optC
class="form-check-input"
type="checkbox"
name="answer"
id="answer_A"
value="A"
/>
Option 3
</p>
Child Component 2:
Single choice choice Option :
<br />
<input
[(ngModel)]="select_option"
type="radio"
name="answer"
id="answer_A"
value="A"
/>Option 1
<br />
<input
[(ngModel)]="select_option"
type="radio"
name="answer"
id="answer_A"
value="B"
/>Option 2
<br />
<input
[(ngModel)]="select_option"
type="radio"
name="answer"
id="answer_A"
value="C"
/>Option 3
There will be various child components, with these two examples showcasing different functionalities. I am relatively new to Angular and trying to figure out how the parent component can access and manipulate data from the child components when needed. Specifically, if a user interacts with the child components (e.g., selecting checkboxes), I want the selected values to be accessible in the parent component. Any suggestions on passing and managing data between parent and child components are greatly welcomed. Thank you.