Migrate PowerBI embedding components to Angular standalone components

Angular/powerbi-client-angular/src/components/powerbi-create-report/powerbi-create-report.component.spec.ts

@@ -19,10 +19,6 @@ describe('PowerBICreateReportEmbedComponent', () => {
   };
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [PowerBICreateReportEmbedComponent],
-    }).compileComponents();
-
     // Arrange
     fixture = TestBed.createComponent(PowerBICreateReportEmbedComponent);
     component = fixture.componentInstance;

Angular/powerbi-client-angular/src/components/powerbi-create-report/powerbi-create-report.component.ts

@@ -14,6 +14,7 @@ import { isEmbedSetupValid } from '../../utils/utils';
 @Component({
   selector: 'powerbi-create-report[embedConfig]',
   template: '<div class={{cssClassName}} #createReportContainer></div>',
+  standalone: true,
 })
 export class PowerBICreateReportEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Configuration for embedding the PowerBI Create report (Required)

Angular/powerbi-client-angular/src/components/powerbi-dashboard-embed/powerbi-dashboard-embed.component.spec.ts

@@ -11,10 +11,6 @@ describe('PowerBIDashboardEmbedComponent', () => {
   let fixture: ComponentFixture<PowerBIDashboardEmbedComponent>;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [PowerBIDashboardEmbedComponent],
-    }).compileComponents();
-
     // Arrange
     fixture = TestBed.createComponent(PowerBIDashboardEmbedComponent);
     component = fixture.componentInstance;

Angular/powerbi-client-angular/src/components/powerbi-dashboard-embed/powerbi-dashboard-embed.component.ts

@@ -12,6 +12,7 @@ import { isEmbedSetupValid } from '../../utils/utils';
 @Component({
   selector: 'powerbi-dashboard[embedConfig]',
   template: '<div class={{cssClassName}} #dashboardContainer></div>',
+  standalone: true,
 })
 export class PowerBIDashboardEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent

Angular/powerbi-client-angular/src/components/powerbi-embed/powerbi-embed.component.spec.ts

@@ -10,10 +10,6 @@ describe('PowerBIEmbedComponent', () => {
   let fixture: ComponentFixture<PowerBIEmbedComponent>;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [PowerBIEmbedComponent],
-    }).compileComponents();
-
     fixture = TestBed.createComponent(PowerBIEmbedComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

Angular/powerbi-client-angular/src/components/powerbi-embed/powerbi-embed.component.ts

@@ -16,6 +16,7 @@ export type EventHandler = (event?: service.ICustomEvent<any>, embeddedEntity?:
 @Component({
   selector: 'powerbi-embed',
   template: '',
+  standalone: true,
 })
 export class PowerBIEmbedComponent implements OnInit {
   // Power BI service instance to be used if user doesnt provide custom service

Angular/powerbi-client-angular/src/components/powerbi-paginated-report-embed/powerbi-paginated-report-embed.component.spec.ts

@@ -11,10 +11,6 @@ describe('PowerBIPaginatedReportEmbedComponent', () => {
   let fixture: ComponentFixture<PowerBIPaginatedReportEmbedComponent>;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [PowerBIPaginatedReportEmbedComponent],
-    }).compileComponents();
-
     // Arrange
     fixture = TestBed.createComponent(PowerBIPaginatedReportEmbedComponent);
     component = fixture.componentInstance;

Angular/powerbi-client-angular/src/components/powerbi-paginated-report-embed/powerbi-paginated-report-embed.component.ts

@@ -13,6 +13,7 @@ import { isEmbedSetupValid } from '../../utils/utils';
 @Component({
   selector: 'powerbi-paginated-report[embedConfig]',
   template: '<div class={{cssClassName}} #paginatedReportContainer></div>',
+  standalone: true,
 })
 export class PowerBIPaginatedReportEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent

Angular/powerbi-client-angular/src/components/powerbi-qna-embed/powerbi-qna-embed.component.spec.ts

@@ -11,10 +11,6 @@ describe('PowerBIQnaEmbedComponent', () => {
   let fixture: ComponentFixture<PowerBIQnaEmbedComponent>;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [PowerBIQnaEmbedComponent],
-    }).compileComponents();
-
     // Arrange
     fixture = TestBed.createComponent(PowerBIQnaEmbedComponent);
     component = fixture.componentInstance;

Angular/powerbi-client-angular/src/components/powerbi-qna-embed/powerbi-qna-embed.component.ts

@@ -12,6 +12,7 @@ import { isEmbedSetupValid } from '../../utils/utils';
 @Component({
   selector: 'powerbi-qna[embedConfig]',
   template: '<div class={{cssClassName}} #qnaContainer></div>',
+  standalone: true,
 })
 export class PowerBIQnaEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent

Angular/powerbi-client-angular/src/components/powerbi-report-embed/powerbi-report-embed.component.spec.ts

@@ -13,10 +13,6 @@ describe('PowerBIReportEmbedComponent', () => {
   let fixture: ComponentFixture<PowerBIReportEmbedComponent>;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [PowerBIReportEmbedComponent],
-    }).compileComponents();
-
     // Arrange
     fixture = TestBed.createComponent(PowerBIReportEmbedComponent);
     component = fixture.componentInstance;

Angular/powerbi-client-angular/src/components/powerbi-report-embed/powerbi-report-embed.component.ts

@@ -12,6 +12,7 @@ import { isEmbedSetupValid } from '../../utils/utils';
 @Component({
   selector: 'powerbi-report[embedConfig]',
   template: '<div class={{cssClassName}} #reportContainer></div>',
+  standalone: true,
 })
 export class PowerBIReportEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent

Angular/powerbi-client-angular/src/components/powerbi-tile-embed/powerbi-tile-embed.component.spec.ts

@@ -11,10 +11,6 @@ describe('PowerBITileEmbedComponent', () => {
   let fixture: ComponentFixture<PowerBITileEmbedComponent>;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [PowerBITileEmbedComponent],
-    }).compileComponents();
-
     // Arrange
     fixture = TestBed.createComponent(PowerBITileEmbedComponent);
     component = fixture.componentInstance;

Angular/powerbi-client-angular/src/components/powerbi-tile-embed/powerbi-tile-embed.component.ts

@@ -12,6 +12,7 @@ import { isEmbedSetupValid } from '../../utils/utils';
 @Component({
   selector: 'powerbi-tile[embedConfig]',
   template: '<div class={{cssClassName}} #tileContainer></div>',
+  standalone: true,
 })
 export class PowerBITileEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent

Angular/powerbi-client-angular/src/components/powerbi-visual-embed/powerbi-visual-embed.component.spec.ts

@@ -12,10 +12,6 @@ describe('PowerBIVisualEmbedComponent', () => {
   let fixture: ComponentFixture<PowerBIVisualEmbedComponent>;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [PowerBIVisualEmbedComponent],
-    }).compileComponents();
-
     // Arrange
     fixture = TestBed.createComponent(PowerBIVisualEmbedComponent);
     component = fixture.componentInstance;

Angular/powerbi-client-angular/src/components/powerbi-visual-embed/powerbi-visual-embed.component.ts

@@ -12,6 +12,7 @@ import { isEmbedSetupValid } from '../../utils/utils';
 @Component({
   selector: 'powerbi-visual[embedConfig]',
   template: '<div class={{cssClassName}} #visualContainer></div>',
+  standalone: true,
 })
 export class PowerBIVisualEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent

Angular/powerbi-client-angular/src/powerbi-embed.module.ts

@@ -12,7 +12,7 @@ import { PowerBIVisualEmbedComponent } from './components/powerbi-visual-embed/p
 import { PowerBICreateReportEmbedComponent } from './components/powerbi-create-report/powerbi-create-report.component';
 
 @NgModule({
-  declarations: [
+  imports: [
     PowerBIEmbedComponent,
     PowerBIDashboardEmbedComponent,
     PowerBIPaginatedReportEmbedComponent,
@@ -22,7 +22,6 @@ import { PowerBICreateReportEmbedComponent } from './components/powerbi-create-r
     PowerBIVisualEmbedComponent,
     PowerBICreateReportEmbedComponent
   ],
-  imports: [],
   exports: [
     PowerBIDashboardEmbedComponent,
     PowerBIPaginatedReportEmbedComponent,

README.md

@@ -19,6 +19,19 @@ import { PowerBIEmbedModule } from 'powerbi-client-angular';
 })
 ```
 
+### Standalone Import
+```ts
+import { PowerBIReportEmbedComponent } from 'powerbi-client-angular';
+
+@Component({
+  selector: 'my-component',
+  standalone: true,
+  imports: [PowerBIReportEmbedComponent],
+  template: `<powerbi-report />`,
+})
+export class MyComponent { }
+```
+
 ### Embed a Power BI report
 ```ts
 <powerbi-report