Skip to content

feat: add new components and templates for Ripple, Simple Combo, Slid… - #1794

Open
Marina-L-Stoyanova wants to merge 1 commit into
masterfrom
mstoyanova/adding-anglar-templates
Open

feat: add new components and templates for Ripple, Simple Combo, Slid…#1794
Marina-L-Stoyanova wants to merge 1 commit into
masterfrom
mstoyanova/adding-anglar-templates

Conversation

@Marina-L-Stoyanova

@Marina-L-Stoyanova Marina-L-Stoyanova commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Closes #1785

  • Implemented Ripple component with associated styles, tests, and template.
  • Added Simple Combo component with data binding and documentation links.
  • Created Slider component with basic functionality and styling.
  • Introduced Snackbar component for user notifications with action handling.
  • Developed Splitter component for responsive layouts with adjustable panes.
  • Added Switch component for binary choices with task management example.
  • Implemented Toast component for displaying brief messages to users.

Copilot AI lite review requested due to automatic review settings September 2, 2026 19:47
@coveralls

coveralls commented Sep 2, 2026

Copy link
Copy Markdown

Coverage Status

coverage: 87.816%. remained the same — mstoyanova/adding-anglar-templates into master

Copilot AI reviewed Sep 2, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

There are a few concrete issues to address (notably the window.open security concern and the PR description not matching the actual scope of changes).

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR expands the Ignite UI for Angular (igx-ts) template library by adding many new component templates (metadata + sample component files) so the CLI add command can scaffold missing Ignite UI samples, aligning with issue #1785’s goal of improving component coverage.

Changes:

  • Added new igx-ts component definitions (BaseComponent) and corresponding default templates (IgniteUIForAngularTemplate) for a broad set of components.
  • Introduced sample Angular component code, HTML, SCSS, and Jasmine specs for each newly added template.
  • Added additional dependency declarations for templates that require extra packages (e.g., igniteui-webcomponents, igniteui-grid-lite).
File summaries
File Description
packages/igx-templates/igx-ts/toast/index.ts Registers Toast component metadata for CLI.
packages/igx-templates/igx-ts/toast/default/index.ts Declares default Toast template metadata and dependencies.
packages/igx-templates/igx-ts/toast/default/files/src/app/path/filePrefix.ts Toast sample standalone component class.
packages/igx-templates/igx-ts/toast/default/files/src/app/path/filePrefix.spec.ts Toast sample Jasmine spec.
packages/igx-templates/igx-ts/toast/default/files/src/app/path/filePrefix.scss Toast sample styles.
packages/igx-templates/igx-ts/toast/default/files/src/app/path/filePrefix.html Toast sample template markup.
packages/igx-templates/igx-ts/switch/index.ts Registers Switch component metadata for CLI.
packages/igx-templates/igx-ts/switch/default/index.ts Declares default Switch template metadata and dependencies.
packages/igx-templates/igx-ts/switch/default/files/src/app/path/filePrefix.ts Switch sample standalone component class.
packages/igx-templates/igx-ts/switch/default/files/src/app/path/filePrefix.spec.ts Switch sample Jasmine spec.
packages/igx-templates/igx-ts/switch/default/files/src/app/path/filePrefix.scss Switch sample styles.
packages/igx-templates/igx-ts/switch/default/files/src/app/path/filePrefix.html Switch sample template markup.
packages/igx-templates/igx-ts/splitter/index.ts Registers Splitter component metadata for CLI.
packages/igx-templates/igx-ts/splitter/default/index.ts Declares default Splitter template metadata and dependencies.
packages/igx-templates/igx-ts/splitter/default/files/src/app/path/filePrefix.ts Splitter sample standalone component class.
packages/igx-templates/igx-ts/splitter/default/files/src/app/path/filePrefix.spec.ts Splitter sample Jasmine spec.
packages/igx-templates/igx-ts/splitter/default/files/src/app/path/filePrefix.scss Splitter sample styles.
packages/igx-templates/igx-ts/splitter/default/files/src/app/path/filePrefix.html Splitter sample template markup.
packages/igx-templates/igx-ts/snackbar/index.ts Registers Snackbar component metadata for CLI.
packages/igx-templates/igx-ts/snackbar/default/index.ts Declares default Snackbar template metadata and dependencies.
packages/igx-templates/igx-ts/snackbar/default/files/src/app/path/filePrefix.ts Snackbar sample standalone component class.
packages/igx-templates/igx-ts/snackbar/default/files/src/app/path/filePrefix.spec.ts Snackbar sample Jasmine spec.
packages/igx-templates/igx-ts/snackbar/default/files/src/app/path/filePrefix.scss Snackbar sample styles.
packages/igx-templates/igx-ts/snackbar/default/files/src/app/path/filePrefix.html Snackbar sample template markup.
packages/igx-templates/igx-ts/slider/index.ts Registers Slider component metadata for CLI.
packages/igx-templates/igx-ts/slider/default/index.ts Declares default Slider template metadata and dependencies.
packages/igx-templates/igx-ts/slider/default/files/src/app/path/filePrefix.ts Slider sample standalone component class.
packages/igx-templates/igx-ts/slider/default/files/src/app/path/filePrefix.spec.ts Slider sample Jasmine spec.
packages/igx-templates/igx-ts/slider/default/files/src/app/path/filePrefix.scss Slider sample styles.
packages/igx-templates/igx-ts/slider/default/files/src/app/path/filePrefix.html Slider sample template markup.
packages/igx-templates/igx-ts/simple-combo/index.ts Registers Simple Combo component metadata for CLI.
packages/igx-templates/igx-ts/simple-combo/default/index.ts Declares default Simple Combo template metadata and dependencies.
packages/igx-templates/igx-ts/simple-combo/default/files/src/app/path/filePrefix.ts Simple Combo sample standalone component class.
packages/igx-templates/igx-ts/simple-combo/default/files/src/app/path/filePrefix.spec.ts Simple Combo sample Jasmine spec.
packages/igx-templates/igx-ts/simple-combo/default/files/src/app/path/filePrefix.scss Simple Combo sample styles.
packages/igx-templates/igx-ts/simple-combo/default/files/src/app/path/filePrefix.html Simple Combo sample template markup.
packages/igx-templates/igx-ts/ripple/index.ts Registers Ripple component metadata for CLI.
packages/igx-templates/igx-ts/ripple/default/index.ts Declares default Ripple template metadata and dependencies.
packages/igx-templates/igx-ts/ripple/default/files/src/app/path/filePrefix.ts Ripple sample standalone component class.
packages/igx-templates/igx-ts/ripple/default/files/src/app/path/filePrefix.spec.ts Ripple sample Jasmine spec.
packages/igx-templates/igx-ts/ripple/default/files/src/app/path/filePrefix.scss Ripple sample styles.
packages/igx-templates/igx-ts/ripple/default/files/src/app/path/filePrefix.html Ripple sample template markup.
packages/igx-templates/igx-ts/rating/index.ts Registers Rating component metadata for CLI.
packages/igx-templates/igx-ts/rating/default/index.ts Declares default Rating template metadata and dependencies.
packages/igx-templates/igx-ts/rating/default/files/src/app/path/filePrefix.ts Rating sample standalone component class (web components).
packages/igx-templates/igx-ts/rating/default/files/src/app/path/filePrefix.spec.ts Rating sample Jasmine spec.
packages/igx-templates/igx-ts/rating/default/files/src/app/path/filePrefix.scss Rating sample styles.
packages/igx-templates/igx-ts/rating/default/files/src/app/path/filePrefix.html Rating sample template markup.
packages/igx-templates/igx-ts/radio/index.ts Registers Radio component metadata for CLI.
packages/igx-templates/igx-ts/radio/default/index.ts Declares default Radio template metadata and dependencies.
packages/igx-templates/igx-ts/radio/default/files/src/app/path/filePrefix.ts Radio sample standalone component class.
packages/igx-templates/igx-ts/radio/default/files/src/app/path/filePrefix.spec.ts Radio sample Jasmine spec.
packages/igx-templates/igx-ts/radio/default/files/src/app/path/filePrefix.scss Radio sample styles.
packages/igx-templates/igx-ts/radio/default/files/src/app/path/filePrefix.html Radio sample template markup.
packages/igx-templates/igx-ts/query-builder/index.ts Registers Query Builder component metadata for CLI.
packages/igx-templates/igx-ts/query-builder/default/index.ts Declares default Query Builder template metadata and dependencies.
packages/igx-templates/igx-ts/query-builder/default/files/src/app/path/filePrefix.ts Query Builder sample standalone component class.
packages/igx-templates/igx-ts/query-builder/default/files/src/app/path/filePrefix.spec.ts Query Builder sample Jasmine spec.
packages/igx-templates/igx-ts/query-builder/default/files/src/app/path/filePrefix.scss Query Builder sample styles.
packages/igx-templates/igx-ts/query-builder/default/files/src/app/path/filePrefix.html Query Builder sample template markup.
packages/igx-templates/igx-ts/paginator/index.ts Registers Paginator component metadata for CLI.
packages/igx-templates/igx-ts/paginator/default/index.ts Declares default Paginator template metadata and dependencies.
packages/igx-templates/igx-ts/paginator/default/files/src/app/path/filePrefix.ts Paginator sample standalone component class.
packages/igx-templates/igx-ts/paginator/default/files/src/app/path/filePrefix.spec.ts Paginator sample Jasmine spec.
packages/igx-templates/igx-ts/paginator/default/files/src/app/path/filePrefix.scss Paginator sample styles.
packages/igx-templates/igx-ts/paginator/default/files/src/app/path/filePrefix.html Paginator sample template markup.
packages/igx-templates/igx-ts/navigation-drawer/index.ts Registers Navigation Drawer component metadata for CLI.
packages/igx-templates/igx-ts/navigation-drawer/default/index.ts Declares default Navigation Drawer template metadata and dependencies.
packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/path/filePrefix.ts Navigation Drawer sample standalone component class.
packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/path/filePrefix.spec.ts Navigation Drawer sample Jasmine spec.
packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/path/filePrefix.scss Navigation Drawer sample styles.
packages/igx-templates/igx-ts/navigation-drawer/default/files/src/app/path/filePrefix.html Navigation Drawer sample template markup.
packages/igx-templates/igx-ts/navbar/index.ts Registers Navbar component metadata for CLI.
packages/igx-templates/igx-ts/navbar/default/index.ts Declares default Navbar template metadata and dependencies.
packages/igx-templates/igx-ts/navbar/default/files/src/app/path/filePrefix.ts Navbar sample standalone component class.
packages/igx-templates/igx-ts/navbar/default/files/src/app/path/filePrefix.spec.ts Navbar sample Jasmine spec.
packages/igx-templates/igx-ts/navbar/default/files/src/app/path/filePrefix.scss Navbar sample styles.
packages/igx-templates/igx-ts/navbar/default/files/src/app/path/filePrefix.html Navbar sample template markup.
packages/igx-templates/igx-ts/mask/index.ts Registers Mask component metadata for CLI.
packages/igx-templates/igx-ts/mask/default/index.ts Declares default Mask template metadata and dependencies.
packages/igx-templates/igx-ts/mask/default/files/src/app/path/filePrefix.ts Mask sample standalone component class.
packages/igx-templates/igx-ts/mask/default/files/src/app/path/filePrefix.spec.ts Mask sample Jasmine spec.
packages/igx-templates/igx-ts/mask/default/files/src/app/path/filePrefix.scss Mask sample styles.
packages/igx-templates/igx-ts/mask/default/files/src/app/path/filePrefix.html Mask sample template markup.
packages/igx-templates/igx-ts/linear-progress/index.ts Registers Linear Progress component metadata for CLI.
packages/igx-templates/igx-ts/linear-progress/default/index.ts Declares default Linear Progress template metadata and dependencies.
packages/igx-templates/igx-ts/linear-progress/default/files/src/app/path/filePrefix.ts Linear Progress sample standalone component class.
packages/igx-templates/igx-ts/linear-progress/default/files/src/app/path/filePrefix.spec.ts Linear Progress sample Jasmine spec.
packages/igx-templates/igx-ts/linear-progress/default/files/src/app/path/filePrefix.scss Linear Progress sample styles.
packages/igx-templates/igx-ts/linear-progress/default/files/src/app/path/filePrefix.html Linear Progress sample template markup.
packages/igx-templates/igx-ts/icon/index.ts Registers Icon component metadata for CLI.
packages/igx-templates/igx-ts/icon/default/index.ts Declares default Icon template metadata and dependencies.
packages/igx-templates/igx-ts/icon/default/files/src/app/path/filePrefix.ts Icon sample standalone component class.
packages/igx-templates/igx-ts/icon/default/files/src/app/path/filePrefix.spec.ts Icon sample Jasmine spec.
packages/igx-templates/igx-ts/icon/default/files/src/app/path/filePrefix.scss Icon sample styles.
packages/igx-templates/igx-ts/icon/default/files/src/app/path/filePrefix.html Icon sample template markup.
packages/igx-templates/igx-ts/grid-lite/index.ts Registers Grid Lite component metadata for CLI.
packages/igx-templates/igx-ts/grid-lite/default/index.ts Declares default Grid Lite template metadata and dependencies.
packages/igx-templates/igx-ts/grid-lite/default/files/src/app/path/filePrefix.ts Grid Lite sample standalone component class.
packages/igx-templates/igx-ts/grid-lite/default/files/src/app/path/filePrefix.spec.ts Grid Lite sample Jasmine spec.
packages/igx-templates/igx-ts/grid-lite/default/files/src/app/path/filePrefix.scss Grid Lite sample styles.
packages/igx-templates/igx-ts/grid-lite/default/files/src/app/path/filePrefix.html Grid Lite sample template markup.
packages/igx-templates/igx-ts/expansion-panel/index.ts Registers Expansion Panel component metadata for CLI.
packages/igx-templates/igx-ts/expansion-panel/default/index.ts Declares default Expansion Panel template metadata and dependencies.
packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/path/filePrefix.ts Expansion Panel sample standalone component class.
packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/path/filePrefix.spec.ts Expansion Panel sample Jasmine spec.
packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/path/filePrefix.scss Expansion Panel sample styles.
packages/igx-templates/igx-ts/expansion-panel/default/files/src/app/path/filePrefix.html Expansion Panel sample template markup.
packages/igx-templates/igx-ts/divider/index.ts Registers Divider component metadata for CLI.
packages/igx-templates/igx-ts/divider/default/index.ts Declares default Divider template metadata and dependencies.
packages/igx-templates/igx-ts/divider/default/files/src/app/path/filePrefix.ts Divider sample standalone component class.
packages/igx-templates/igx-ts/divider/default/files/src/app/path/filePrefix.spec.ts Divider sample Jasmine spec.
packages/igx-templates/igx-ts/divider/default/files/src/app/path/filePrefix.scss Divider sample styles.
packages/igx-templates/igx-ts/divider/default/files/src/app/path/filePrefix.html Divider sample template markup.
packages/igx-templates/igx-ts/date-time-editor/index.ts Registers Date Time Editor component metadata for CLI.
packages/igx-templates/igx-ts/date-time-editor/default/index.ts Declares default Date Time Editor template metadata and dependencies.
packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/path/filePrefix.ts Date Time Editor sample standalone component class.
packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/path/filePrefix.spec.ts Date Time Editor sample Jasmine spec.
packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/path/filePrefix.scss Date Time Editor sample styles.
packages/igx-templates/igx-ts/date-time-editor/default/files/src/app/path/filePrefix.html Date Time Editor sample template markup.
packages/igx-templates/igx-ts/circular-progress/index.ts Registers Circular Progress component metadata for CLI.
packages/igx-templates/igx-ts/circular-progress/default/index.ts Declares default Circular Progress template metadata and dependencies.
packages/igx-templates/igx-ts/circular-progress/default/files/src/app/path/filePrefix.ts Circular Progress sample standalone component class.
packages/igx-templates/igx-ts/circular-progress/default/files/src/app/path/filePrefix.spec.ts Circular Progress sample Jasmine spec.
packages/igx-templates/igx-ts/circular-progress/default/files/src/app/path/filePrefix.scss Circular Progress sample styles.
packages/igx-templates/igx-ts/circular-progress/default/files/src/app/path/filePrefix.html Circular Progress sample template markup.
packages/igx-templates/igx-ts/checkbox/index.ts Registers Checkbox component metadata for CLI.
packages/igx-templates/igx-ts/checkbox/default/index.ts Declares default Checkbox template metadata and dependencies.
packages/igx-templates/igx-ts/checkbox/default/files/src/app/path/filePrefix.ts Checkbox sample standalone component class.
packages/igx-templates/igx-ts/checkbox/default/files/src/app/path/filePrefix.spec.ts Checkbox sample Jasmine spec.
packages/igx-templates/igx-ts/checkbox/default/files/src/app/path/filePrefix.scss Checkbox sample styles.
packages/igx-templates/igx-ts/checkbox/default/files/src/app/path/filePrefix.html Checkbox sample template markup.
packages/igx-templates/igx-ts/chat/index.ts Registers Chat component metadata for CLI.
packages/igx-templates/igx-ts/chat/default/index.ts Declares default Chat template metadata and dependencies.
packages/igx-templates/igx-ts/chat/default/files/src/app/path/filePrefix.ts Chat sample standalone component class.
packages/igx-templates/igx-ts/chat/default/files/src/app/path/filePrefix.spec.ts Chat sample Jasmine spec.
packages/igx-templates/igx-ts/chat/default/files/src/app/path/filePrefix.scss Chat sample styles.
packages/igx-templates/igx-ts/chat/default/files/src/app/path/filePrefix.html Chat sample template markup.
packages/igx-templates/igx-ts/card/index.ts Registers Card component metadata for CLI.
packages/igx-templates/igx-ts/card/default/index.ts Declares default Card template metadata and dependencies.
packages/igx-templates/igx-ts/card/default/files/src/app/path/filePrefix.ts Card sample standalone component class.
packages/igx-templates/igx-ts/card/default/files/src/app/path/filePrefix.spec.ts Card sample Jasmine spec.
packages/igx-templates/igx-ts/card/default/files/src/app/path/filePrefix.scss Card sample styles.
packages/igx-templates/igx-ts/card/default/files/src/app/path/filePrefix.html Card sample template markup.
packages/igx-templates/igx-ts/button-group/index.ts Registers Button Group component metadata for CLI.
packages/igx-templates/igx-ts/button-group/default/index.ts Declares default Button Group template metadata and dependencies.
packages/igx-templates/igx-ts/button-group/default/files/src/app/path/filePrefix.ts Button Group sample standalone component class.
packages/igx-templates/igx-ts/button-group/default/files/src/app/path/filePrefix.spec.ts Button Group sample Jasmine spec.
packages/igx-templates/igx-ts/button-group/default/files/src/app/path/filePrefix.scss Button Group sample styles.
packages/igx-templates/igx-ts/button-group/default/files/src/app/path/filePrefix.html Button Group sample template markup.
packages/igx-templates/igx-ts/banner/index.ts Registers Banner component metadata for CLI.
packages/igx-templates/igx-ts/banner/default/index.ts Declares default Banner template metadata and dependencies.
packages/igx-templates/igx-ts/banner/default/files/src/app/path/filePrefix.ts Banner sample standalone component class.
packages/igx-templates/igx-ts/banner/default/files/src/app/path/filePrefix.spec.ts Banner sample Jasmine spec.
packages/igx-templates/igx-ts/banner/default/files/src/app/path/filePrefix.scss Banner sample styles.
packages/igx-templates/igx-ts/banner/default/files/src/app/path/filePrefix.html Banner sample template markup.
packages/igx-templates/igx-ts/badge/index.ts Registers Badge component metadata for CLI.
packages/igx-templates/igx-ts/badge/default/index.ts Declares default Badge template metadata and dependencies.
packages/igx-templates/igx-ts/badge/default/files/src/app/path/filePrefix.ts Badge sample standalone component class.
packages/igx-templates/igx-ts/badge/default/files/src/app/path/filePrefix.spec.ts Badge sample Jasmine spec.
packages/igx-templates/igx-ts/badge/default/files/src/app/path/filePrefix.scss Badge sample styles.
packages/igx-templates/igx-ts/badge/default/files/src/app/path/filePrefix.html Badge sample template markup.
packages/igx-templates/igx-ts/avatar/index.ts Registers Avatar component metadata for CLI.
packages/igx-templates/igx-ts/avatar/default/index.ts Declares default Avatar template metadata and dependencies.
packages/igx-templates/igx-ts/avatar/default/files/src/app/path/filePrefix.ts Avatar sample standalone component class.
packages/igx-templates/igx-ts/avatar/default/files/src/app/path/filePrefix.spec.ts Avatar sample Jasmine spec.
packages/igx-templates/igx-ts/avatar/default/files/src/app/path/filePrefix.scss Avatar sample styles.
packages/igx-templates/igx-ts/avatar/default/files/src/app/path/filePrefix.html Avatar sample template markup.
packages/igx-templates/igx-ts/action-strip/index.ts Registers Action Strip component metadata for CLI.
packages/igx-templates/igx-ts/action-strip/default/index.ts Declares default Action Strip template metadata and dependencies.
packages/igx-templates/igx-ts/action-strip/default/files/src/app/path/filePrefix.ts Action Strip sample standalone component class.
packages/igx-templates/igx-ts/action-strip/default/files/src/app/path/filePrefix.spec.ts Action Strip sample Jasmine spec.
packages/igx-templates/igx-ts/action-strip/default/files/src/app/path/filePrefix.scss Action Strip sample styles.
packages/igx-templates/igx-ts/action-strip/default/files/src/app/path/filePrefix.html Action Strip sample template markup.
Review details
  • Files reviewed: 174/174 changed files
  • Comments generated: 4
  • Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread packages/igx-templates/igx-ts/card/default/files/src/app/__path__/__filePrefix__.ts
Comment on lines +31 to +33
public openUrl(url: string): void {
window.open(url, '_blank');
}
Comment thread packages/igx-templates/igx-ts/action-strip/default/files/src/app/__path__/__filePrefix__.html
<a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/action_strip.html" target="_blank">official documentation</a>.</p>
<div class="action-strip-container">
<div class="action-strip-container__placeholder">Hover to reveal actions</div>
<igx-action-strip #actionStrip>
Comment thread packages/igx-templates/igx-ts/rating/default/index.ts
Comment on lines +11 to +13
this.name = "Rating";
this.description = "Basic igc-rating sample";
this.packages = ["igniteui-webcomponents@^7.2.1"];
Comment thread packages/igx-templates/igx-ts/toast/index.ts
Comment on lines +3 to +8
class IgxToastComponent extends BaseComponent {
constructor() {
super(__dirname);
this.name = "Toast";
this.group = "Interactions";
this.description = "shows application messages in a stylized, non-interactive pop-up box";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort, defaults to Lite
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Angular] Adding new/missing component

3 participants

@Marina-L-Stoyanova @coveralls