want to use wheel twice in same application but not working

[pankajsaw1122]

I have a requirement to spin two wheel one numeric wheel and 2nd alphabetic wheel. I have tried to create two sperate component for both wheels and tried to view both components like this: -

<div class="row">
    <app-num-wheel></app-num-wheel>
</div>

<div class="row">
    <app-alpha-wheel></app-alpha-wheel>
</div>

but what happens is 2nd wheel overlaps the ist wheel. Is there any way to show both wheels in a same page.

alpha-wheel component-

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgxWheelComponent } from 'ngx-wheel';

@component({
selector: 'app-alpha-wheel',
templateUrl: './alpha-wheel.component.html',
styleUrls: ['./alpha-wheel.component.css']
})
export class AlphaWheelComponent implements OnInit {
@ViewChild(NgxWheelComponent, { static: false }) alphaWheel: any;
duration = 6;
alphaItems = [
{ id: 1, 'fillStyle': '#eae56f', 'text': 'A' },
{ id: 2, 'fillStyle': '#89f26e', 'text': 'B' },
{ id: 3, 'fillStyle': '#7de6ef', 'text': 'C' },
{ id: 4, 'fillStyle': '#e7706f', 'text': 'D' },
{ id: 5, 'fillStyle': '#e7706f', 'text': 'E' },
{ id: 6, 'fillStyle': '#e7706f', 'text': 'F' },
{ id: 7, 'fillStyle': '#e7706f', 'text': 'G' },
{ id: 8, 'fillStyle': '#e7706f', 'text': 'H' },
{ id: 9, 'fillStyle': '#e7706f', 'text': 'I' }
];

ngAfterViewInit() {
console.log('only after THIS EVENT "wheel" is usable!!');
this.alphaWheel.spin();
}

ngOnInit(): void {
}

before() {

}
after() {
console.log('function called');
}

reset() {
this.alphaWheel.reset();
}

}

num wheel component:-

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgxWheelComponent } from 'ngx-wheel';

@component({
selector: 'app-num-wheel',
templateUrl: './num-wheel.component.html',
styleUrls: ['./num-wheel.component.css']
})
export class NumWheelComponent implements OnInit {
@ViewChild(NgxWheelComponent, { static: false }) numWheel: any;
duration: number = 6;
items = [
{ id: 1, 'fillStyle': '#eae56f', 'text': '10' },
{ id: 2, 'fillStyle': '#89f26e', 'text': '11' },
{ id: 3, 'fillStyle': '#7de6ef', 'text': '12' },
{ id: 4, 'fillStyle': '#e7706f', 'text': '13' },
{ id: 5, 'fillStyle': '#e7706f', 'text': '14' },
{ id: 6, 'fillStyle': '#e7706f', 'text': '15' },
{ id: 7, 'fillStyle': '#e7706f', 'text': '16' },
{ id: 8, 'fillStyle': '#e7706f', 'text': '17' },
{ id: 9, 'fillStyle': '#e7706f', 'text': '18' },
{ id: 10, 'fillStyle': '#e7706f', 'text': '19' },
{ id: 11, 'fillStyle': '#eae56f', 'text': '20' },
{ id: 12, 'fillStyle': '#89f26e', 'text': '21' },
{ id: 13, 'fillStyle': '#7de6ef', 'text': '22' },
{ id: 14, 'fillStyle': '#e7706f', 'text': '23' },
{ id: 15, 'fillStyle': '#e7706f', 'text': '24' },
{ id: 16, 'fillStyle': '#e7706f', 'text': '25' },
{ id: 17, 'fillStyle': '#e7706f', 'text': '26' },
{ id: 18, 'fillStyle': '#e7706f', 'text': '27' },
{ id: 19, 'fillStyle': '#e7706f', 'text': '28' },
{ id: 20, 'fillStyle': '#e7706f', 'text': '29' },
{ id: 21, 'fillStyle': '#e7706f', 'text': '30' }
];

ngAfterViewInit() {
console.log('only after THIS EVENT "wheel" is usable!!');
this.numWheel.spin();
}

ngOnInit(): void {
}

before() {
}
after() {

}

reset() {
// Reset allows you to redraw the wheel
// Use it after any change to wheel configurations or to allow re-spinning
this.numWheel.reset();
}

}