After thorough research, I couldn't find a solution to my problem despite similar questions being asked.
I've developed an angular component for styled radio buttons and need to use it multiple times on different instances.
To get a better understanding, please refer to this image:
https://i.sstatic.net/NhAkw.png
How can I achieve independent behavior for multiple instances?
A summary of the relevant parts in my code:
Parent component .ts file:
import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { TxtZoneComponent } from './txtzone/txtzone.component';
import { EditorDirective } from './txtzone/editor.directive';
import { RadioButtonComponent } from './CustomControls/RadioButton';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/App.css'],
})
export class AppComponent {
public Myheader: string = "Line Breaker Web Application"
public RadButtonBackColor: string = "rgb(50,50,50)"
@ViewChild(EditorDirective) vc: EditorDirective;
constructor()
{
}
}
Parent component .html file:
<div><MyRadBtn [Description]="'Break Word'" [BackColor]="RadButtonBackColor">Loading...</MyRadBtn></div>
<div><MyRadBtn [Description]="'SQL Mode'" [BackColor]="RadButtonBackColor">Loading...</MyRadBtn></div>
RadioButton component .ts file:
import { Component, Input, OnChanges, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'MyRadBtn',
templateUrl: 'app/CustomControls/RadioButton.html',
styleUrls: ['app/CustomControls/RadioButtonStyleSheet.css'],
})
export class RadioButtonComponent
{
@Input() BackColor: string = "rgb(50,50,50)";
@Input() Description: string;
constructor()
{
}
ngOnChanges() {
}
clicked(): void
{
alert(this.Description);
}
}
RadioButton .html file:
<div class="breakwordcont" [ngStyle]="{'background-color': BackColor}">
<div class="desc"><span>{{Description}}</span></div>
<div class="control">
<div class="slideOne">
<input type='checkbox' value='None' id='slideOne' name='check' (click)="clicked()" />
<label for="slideOne"></label>
</div>
</div>
</div>
RadioButton .css file:
input[type=checkbox] {
visibility: hidden;
}
.slideOne {
width: 50px;
height: 10px;
background: #333;
margin: 5px auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: relative;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
.slideOne label {
display: block;
width: 16px;
height: 16px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
/* Remaining CSS styles */
EDIT FOR FUTURE VIEWERS WITH THE SAME ISSUE
based on @deek answer, here are the relevant changes in my fixed code:
1. adding ID property to radioButton .ts file:
export class RadioButtonComponent
{
@Input() ID: string;
// ... rest of class definitions...
}
Passing the ID for each radio button from the parent component:
<div><MyRadBtn [ID]="'id-one'" [Description]="'Break Word'" [BackColor]="RadButtonBackColor">Loading...</MyRadBtn></div> <div><MyRadBtn [ID]="'id-two'" [Description]="'SQL Mode'" [BackColor]="RadButtonBackColor">Loading...</MyRadBtn></div>binding the id of the input to the css class:
<div class="breakwordcont" [ngStyle]="{'background-color': BackColor}"> <div class="desc"><span>{{Description}}</span></div> <div class="control"> <div class="slideOne"> <input type='checkbox' value='None' id={{ID}} name='check' /> <label for={{ID}} (click)="clicked()"></label> </div> </div> </div>