When it comes to component names, they are fixed in place. However, there is a way you can pass information to a component using the following approach:
Firstly, declare a variable within your component like so:
public selectedNumber: number;
Next, create a method within your component that will set the value of this variable:
public updateSelectedNumber(num: number)
{
this.selectedNumber = num;
}
You can then use this selectedNumber property in your template to pass data like this:
<FAQ-selection selected="selectedNumber"></FAQ-selection>
Within your FAQ-selection component, you can receive this input variable as follows:
@Component({
selector: 'FAQ-selection',
templateUrl: '/path/to/template.html',
inputs: ['selectedNumber']
})
export class LoginComponent
{
public selectedNumber: number;
}
Utilize this selectedNumber in your template to show or hide any content based on your requirements.
Additionally, you can leverage this variable to display different components based on certain conditions using the *ngIf directive as shown below:
<FAQ-selection *ngIf="selectedNumber == 1"></FAQ-selection>
<Another-Component *ngIf="selectedNumber == 2"></Another-Component>