You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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: -
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: -
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();
}
}
The text was updated successfully, but these errors were encountered: