1af7e761b9
- Moved brightness control styles from container SASS to BrightnessControlsComponent - Moved zoom control styles from container SASS to ZoomControlsComponent - Fixed Angular view encapsulation issue preventing styles from applying - Added @brianpooe/ngx-pinch-zoom path mapping to tsconfig.json - Updated app component to import from @brianpooe/ngx-pinch-zoom This fixes the issue where control icons were not visible due to Angular's view encapsulation preventing parent component styles from applying to child presentational components. Each component now contains its own styles.
29 lines
772 B
TypeScript
29 lines
772 B
TypeScript
import { Component, signal } from '@angular/core';
|
|
import { PinchZoomComponent } from '@brianpooe/ngx-pinch-zoom';
|
|
|
|
/**
|
|
* Example app demonstrating all ngx-pinch-zoom features.
|
|
* Uses Angular 20 standalone component with signals.
|
|
*/
|
|
@Component({
|
|
selector: 'app-root',
|
|
templateUrl: './app.component.html',
|
|
styleUrls: ['./app.component.sass'],
|
|
standalone: true,
|
|
imports: [PinchZoomComponent],
|
|
})
|
|
export class AppComponent {
|
|
title = 'ivypinchApp';
|
|
|
|
// Use signals for reactive state management
|
|
zoomstate = signal(1);
|
|
brightnessstate = signal(1.0);
|
|
|
|
onZoomChanged(zoom: number): void {
|
|
this.zoomstate.set(zoom);
|
|
}
|
|
|
|
onBrightnessChanged(brightness: number): void {
|
|
this.brightnessstate.set(brightness);
|
|
}
|
|
}
|