-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create Angular directive for nimble-table (#914)
# Pull Request ## 🤨 Rationale Create an Angular directive for the table, so that it can be used within Angular. This is part of #840. ## 👩💻 Implementation - Create an Angular directive for the nimble-table that allows binding data to the `data` property on the table. - Add a table to the example Angular app. - Updated component status table to reflect that experimental Angular support now exists for the nimble-table ## 🧪 Testing - Create unit tests for the Angular directive following the same pattern as other unit tests in Angular - I did not write a test for "with template string values" since I didn't think it made sense to write a test for hard-coding an array in the template - I did not write a test for "with attribute bound values" since `data` is not an attribute on the `nimble-table` web component ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.
- Loading branch information
1 parent
18f6db5
commit c1b0926
Showing
10 changed files
with
193 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 24 additions & 0 deletions
24
angular-workspace/projects/ni/nimble-angular/src/directives/table/nimble-table.directive.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; | ||
| import type { Table } from '@ni/nimble-components/dist/esm/table'; | ||
| import type { TableRecord, TableFieldName, TableFieldValue } from '@ni/nimble-components/dist/esm/table/types'; | ||
|
|
||
| export type { Table }; | ||
| export { TableRecord, TableFieldName, TableFieldValue }; | ||
|
|
||
| /** | ||
| * Directive to provide Angular integration for the table element. | ||
| */ | ||
| @Directive({ | ||
| selector: 'nimble-table' | ||
| }) | ||
| export class NimbleTableDirective<TData extends TableRecord = TableRecord> { | ||
| public get data(): TData[] { | ||
| return this.elementRef.nativeElement.data; | ||
| } | ||
|
|
||
| @Input() public set data(value: TData[]) { | ||
| this.renderer.setProperty(this.elementRef.nativeElement, 'data', value); | ||
| } | ||
|
|
||
| public constructor(private readonly renderer: Renderer2, private readonly elementRef: ElementRef<Table<TData>>) {} | ||
| } |
12 changes: 12 additions & 0 deletions
12
angular-workspace/projects/ni/nimble-angular/src/directives/table/nimble-table.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { NimbleTableDirective } from './nimble-table.directive'; | ||
|
|
||
| import '@ni/nimble-components/dist/esm/table'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [NimbleTableDirective], | ||
| imports: [CommonModule], | ||
| exports: [NimbleTableDirective] | ||
| }) | ||
| export class NimbleTableModule { } |
110 changes: 110 additions & 0 deletions
110
...pace/projects/ni/nimble-angular/src/directives/table/tests/nimble-table.directive.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import { Component, ElementRef, ViewChild } from '@angular/core'; | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import type { Table, TableRecord } from '@ni/nimble-angular'; | ||
| import { NimbleTableDirective } from '../nimble-table.directive'; | ||
| import { NimbleTableModule } from '../nimble-table.module'; | ||
|
|
||
| describe('Nimble table', () => { | ||
| describe('module', () => { | ||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| imports: [NimbleTableModule] | ||
| }); | ||
| }); | ||
|
|
||
| it('custom element is defined', () => { | ||
| expect(customElements.get('nimble-table')).not.toBeUndefined(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('with no values in template', () => { | ||
| @Component({ | ||
| template: ` | ||
| <nimble-table #table></nimble-table> | ||
| ` | ||
| }) | ||
| class TestHostComponent { | ||
| @ViewChild('table', { read: NimbleTableDirective }) public directive: NimbleTableDirective; | ||
| @ViewChild('table', { read: ElementRef }) public elementRef: ElementRef<Table>; | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestHostComponent>; | ||
| let directive: NimbleTableDirective; | ||
| let nativeElement: Table; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [TestHostComponent], | ||
| imports: [NimbleTableModule] | ||
| }); | ||
| fixture = TestBed.createComponent(TestHostComponent); | ||
| fixture.detectChanges(); | ||
| directive = fixture.componentInstance.directive; | ||
| nativeElement = fixture.componentInstance.elementRef.nativeElement; | ||
| }); | ||
|
|
||
| it('has expected defaults for data', () => { | ||
| expect(directive.data).toEqual([]); | ||
| expect(nativeElement.data).toEqual([]); | ||
| }); | ||
| }); | ||
|
|
||
| describe('with property bound values', () => { | ||
| interface SimpleRecord extends TableRecord { | ||
| myStr: string; | ||
| myNum: number; | ||
| } | ||
|
|
||
| @Component({ | ||
| template: ` | ||
| <nimble-table #table [data]="data"></nimble-table> | ||
| ` | ||
| }) | ||
| class TestHostComponent { | ||
| @ViewChild('table', { read: NimbleTableDirective }) public directive: NimbleTableDirective<SimpleRecord>; | ||
| @ViewChild('table', { read: ElementRef }) public elementRef: ElementRef<Table<SimpleRecord>>; | ||
| public readonly originalData = [{ | ||
| myStr: 'hello world', | ||
| myNum: 5 | ||
| }] as const; | ||
|
|
||
| public data: SimpleRecord[] = [...this.originalData]; | ||
| } | ||
|
|
||
| let fixture: ComponentFixture<TestHostComponent>; | ||
| let directive: NimbleTableDirective<SimpleRecord>; | ||
| let nativeElement: Table<SimpleRecord>; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [TestHostComponent], | ||
| imports: [NimbleTableModule] | ||
| }); | ||
| fixture = TestBed.createComponent(TestHostComponent); | ||
| fixture.detectChanges(); | ||
| directive = fixture.componentInstance.directive; | ||
| nativeElement = fixture.componentInstance.elementRef.nativeElement; | ||
| }); | ||
|
|
||
| it('can be configured with property binding for data', () => { | ||
| expect(directive.data).toEqual(fixture.componentInstance.originalData); | ||
| expect(nativeElement.data).toEqual(fixture.componentInstance.originalData); | ||
|
|
||
| const newData = [{ | ||
| myStr: 'abc', | ||
| myNum: -6 | ||
| }, { | ||
| myStr: 'hello world', | ||
| myNum: 7 | ||
| }, { | ||
| myStr: 'foo bar baz', | ||
| myNum: 999 | ||
| }] as const; | ||
| fixture.componentInstance.data = [...newData]; | ||
| fixture.detectChanges(); | ||
|
|
||
| expect(directive.data).toEqual(newData); | ||
| expect(nativeElement.data).toEqual(newData); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
change/@ni-nimble-angular-761cf0de-3455-4fb8-af25-0631d706dee5.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "patch", | ||
| "comment": "Angular support for nimble-table", | ||
| "packageName": "@ni/nimble-angular", | ||
| "email": "20542556+mollykreis@users.noreply.github.com", | ||
| "dependentChangeType": "patch" | ||
| } |