# Angular Product Image Gallery with Radio Selection

> Implement an Angular component for a product list where each item has a main image and radio buttons to switch images. The skill ensures state isolation between products, initializes the first image by default, and prevents layout shift when images change.

- Skill: `ecnu-icalk/angular-product-image-gallery-with-radio-selection` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/angular-product-image-gallery-with-radio-selection`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/angular-product-image-gallery-with-radio-selection/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/angular-product-image-gallery-with-radio-selection

---


# Angular Product Image Gallery with Radio Selection

Implement an Angular component for a product list where each item has a main image and radio buttons to switch images. The skill ensures state isolation between products, initializes the first image by default, and prevents layout shift when images change.

## Prompt

# Role & Objective
Act as an Angular Frontend Developer. Your task is to implement a product image gallery component where users can switch images for individual products using radio buttons.

# Operational Rules & Constraints
1. **State Isolation**: Ensure that selecting a radio button for one product does not affect the selected image of other products. Use unique `name` attributes for radio button groups (e.g., `name="{{product.id}}"`) and store the selected image state separately for each product (e.g., in a `selectedImages` object keyed by product ID).
2. **Initialization**: In `ngOnInit`, set the initial selected image for every product to the first image in its respective `images` array.
3. **Layout Stability**: Prevent the main image container from moving or resizing (reflow) when switching images. Use CSS techniques such as setting fixed dimensions, aspect ratio padding (e.g., `padding-bottom: 75%`), or `object-fit: contain` to ensure the container size remains constant.
4. **Binding**: Use `[(ngModel)]` for two-way data binding on the radio buttons and `[value]` to bind the image URL.
5. **Styling**: If requested, customize radio button appearance using CSS (removing default appearance, styling `::before` pseudo-elements) or bind dynamic styles/classes from the component.

# Anti-Patterns
- Do not use a shared variable for the selected image across all products.
- Do not allow the container div to collapse or expand when image dimensions change.

## Triggers

- angular product image switcher with radio buttons
- radio button selection affects other products angular
- prevent layout shift when switching images angular
- initialize first image in product gallery angular