Initial Angular code bring up for nimble-rich-text-viewer component

angular-workspace/projects/example-client-app/src/app/app.module.ts

@@ -13,6 +13,7 @@ import { NimbleTextAreaModule, NimbleTextFieldModule, NimbleNumberFieldModule, N
 import { NimbleTableModule } from '@ni/nimble-angular/table';
 import { NimbleTableColumnTextModule } from '@ni/nimble-angular/table-column/text';
 import { NimbleTableColumnAnchorModule } from '@ni/nimble-angular/table-column/anchor';
+import { NimbleRichTextViewerModule } from '@ni/nimble-angular/rich-text-viewer';
 import { AppComponent } from './app.component';
 import { CustomAppComponent } from './customapp/customapp.component';
 import { HeaderComponent } from './header/header.component';
@@ -69,6 +70,7 @@ import { HeaderComponent } from './header/header.component';
         NimbleTableColumnTextModule,
         NimbleTableColumnAnchorModule,
         NimbleBannerModule,
+        NimbleRichTextViewerModule,
         RouterModule.forRoot(
             [
                 { path: '', redirectTo: '/customapp', pathMatch: 'full' },

angular-workspace/projects/example-client-app/src/app/customapp/customapp.component.html

@@ -170,6 +170,10 @@
                 <nimble-list-option *ngFor="let item of comboboxItems" [ngValue]="item">{{ item ? item.first : '' }}</nimble-list-option>
             </nimble-combobox>
         </div>
+        <div class="sub-container">
+            <div class="container-label">Rich Text Viewer</div>
+            <nimble-rich-text-viewer></nimble-rich-text-viewer>
+        </div>
         <div class="sub-container">
             <div class="container-label">Spinner</div>
             <nimble-spinner aria-label="Loading example content"></nimble-spinner>

angular-workspace/projects/ni/nimble-angular/rich-text-viewer/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+}

angular-workspace/projects/ni/nimble-angular/rich-text-viewer/nimble-rich-text-viewer.directive.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+import type { RichTextViewer } from '@ni/nimble-components/dist/esm/rich-text-viewer';
+
+export type { RichTextViewer };
+
+/**
+ * Directive to provide Angular integration for the rich text viewer element.
+ */
+@Directive({
+    selector: 'nimble-rich-text-viewer'
+})
+
+export class NimbleRichTextViewerDirective {
+
+}

angular-workspace/projects/ni/nimble-angular/rich-text-viewer/nimble-rich-text-viewer.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NimbleRichTextViewerDirective } from './nimble-rich-text-viewer.directive';
+
+import '@ni/nimble-components/dist/esm/rich-text-viewer';
+
+@NgModule({
+    declarations: [NimbleRichTextViewerDirective],
+    imports: [CommonModule],
+    exports: [NimbleRichTextViewerDirective]
+})
+export class NimbleRichTextViewerModule { }

angular-workspace/projects/ni/nimble-angular/rich-text-viewer/public-api.ts

@@ -0,0 +1,2 @@
+export * from './nimble-rich-text-viewer.directive';
+export * from './nimble-rich-text-viewer.module';

angular-workspace/projects/ni/nimble-angular/rich-text-viewer/tests/nimble-rich-text-viewer.directive.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+import { NimbleRichTextViewerModule } from '../nimble-rich-text-viewer.module';
+
+describe('Nimble Rich Text Viewer', () => {
+    describe('module', () => {
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                imports: [NimbleRichTextViewerModule]
+            });
+        });
+
+        it('custom element is defined', () => {
+            expect(customElements.get('nimble-rich-text-viewer')).not.toBeUndefined();
+        });
+    });
+});

change/@ni-nimble-angular-cdb52323-3b25-46f5-806a-fc2a0fb553e0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Angular integration for nimble-rich-text-viewer component",
+  "packageName": "@ni/nimble-angular",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}