feat(api): adds directive closeButton and update buttons demo with ne… #132
Conversation
…w Close Button component
✅ Deploy Preview for ng-kit ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
Adds a new Close Button directive to the component library and wires it into the demo, while updating the public API to expose the new directive and reordering some existing exports.
- Exposes
CloseButtonDirectiveand new button components inpublic-api.ts - Implements
CloseButtonDirectiveto automatically add asecondary-buttonclass - Updates the demo component to import the directive, enable
OnPushchange detection, and show a<button closeButton>
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| projects/ng-kit/src/public-api.ts | Reordered spinner exports and added CloseButtonDirective and new button exports |
| projects/ng-kit/src/lib/components/buttons/close-button/close-button.directive.ts | Added CloseButtonDirective implementation |
| projects/ng-kit-demo/src/app/buttons-demo/buttons-demo.component.ts | Imported CloseButtonDirective, MatButtonModule, and set OnPush change detection |
| projects/ng-kit-demo/src/app/buttons-demo/buttons-demo.component.html | Added a <button closeButton> example |
Comments suppressed due to low confidence (1)
projects/ng-kit/src/lib/components/buttons/close-button/close-button.directive.ts:1
- [nitpick] Add unit tests for
CloseButtonDirectiveto verify that thesecondary-buttonclass is correctly added to the host element when the directive is instantiated.
import { Directive, ElementRef, inject } from '@angular/core';
| import { Directive, ElementRef, inject } from '@angular/core'; | ||
|
|
||
| @Directive({ | ||
| selector: '[closeButton]', | ||
| }) | ||
| export class CloseButtonDirective { | ||
| elementRef = inject(ElementRef); | ||
|
|
||
| constructor() { | ||
| this.elementRef.nativeElement.classList.add('secondary-button'); |
There was a problem hiding this comment.
Use Angular's Renderer2 (injected) instead of direct ElementRef.nativeElement manipulation to add classes, ensuring proper abstraction and avoiding direct DOM access.
| import { Directive, ElementRef, inject } from '@angular/core'; | |
| @Directive({ | |
| selector: '[closeButton]', | |
| }) | |
| export class CloseButtonDirective { | |
| elementRef = inject(ElementRef); | |
| constructor() { | |
| this.elementRef.nativeElement.classList.add('secondary-button'); | |
| import { Directive, ElementRef, Renderer2, inject } from '@angular/core'; | |
| @Directive({ | |
| selector: '[closeButton]', | |
| }) | |
| export class CloseButtonDirective { | |
| elementRef = inject(ElementRef); | |
| renderer = inject(Renderer2); | |
| constructor() { | |
| this.renderer.addClass(this.elementRef.nativeElement, 'secondary-button'); |
Copilot uses AI. Check for mistakes.
| @@ -34,8 +36,11 @@ import { | |||
| SearchButtonComponent, | |||
| SuccessButtonComponent, | |||
| DeleteButtonComponent, | |||
| CloseButtonDirective, | |||
There was a problem hiding this comment.
Add standalone: true to the @Component decorator so that the imports array (including CloseButtonDirective and MatButtonModule) is applied correctly.
Copilot uses AI. Check for mistakes.
| @@ -0,0 +1,12 @@ | |||
| import { Directive, ElementRef, inject } from '@angular/core'; | |||
|
|
|||
| @Directive({ | |||
There was a problem hiding this comment.
Mark this directive as standalone by adding standalone: true in the decorator so it can be imported directly without NgModule declarations.
Copilot uses AI. Check for mistakes.
|
🎉 This PR is included in version 20.5.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
…w Close Button component