Issue
I have an Angular component (audit2.component) inside a module (nursing-audit.module) and I am trying to open a p-dialogue and render a component (urc.component) that exists in a different module (variance.module). I have the p-dialogue opening and reding the header, but I can't seem to get the urc.component to render using the selector I defined on it.
audit2.component.ts
import { UrcComponent } from "src/app/variance/urc/urc.component";
@Component({
selector: "app-audit2",
templateUrl: "./audit2.component.html",
styleUrls: ["./audit2.component.css"],
providers: [MessageService]
})
audit2.component.html - for the p-dialogue
<p-dialog
[(visible)]="individualActivityDialog"
[style]="{ width: '98vw' }"
[maximizable]="true"
[resizable]="true">
<p-header>
<h4>Individual Activity</h4>
{{ selectedRow["Name"] }} ID:{{ selectedRow["Id"] }}
</p-header>
<app-urc></app-urc>
</p-dialog>
nursing-audit.module.ts
import { NgModule, ChangeDetectorRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NursingAuditRoutingModule } from './nursing-audit-routing.module';
import { NursingAuditComponent } from './nursing-audit.component';
import { TreeNode } from 'primeng/api/treenode';
import { NursingAuditService } from '../services/nursing-audit.service';
import { TabViewModule } from 'primeng/tabview';
import {TreeTableModule } from 'primeng/treetable';
import {TableModule} from 'primeng/table'
import {DialogModule} from 'primeng/dialog';
import {MessagesModule} from 'primeng/messages';
import {MessageModule} from 'primeng/message';
import {FormsModule } from '@angular/forms';
import {DropdownModule} from 'primeng/dropdown';
import {TooltipModule} from 'primeng/tooltip';
import { SummaryComponent } from './summary/summary.component';
import { AuditComponent } from './audit/audit.component';
import { IndividualActivityComponent } from './individual-activity/individual-activity.component';
import { SelectButtonModule} from 'primeng/selectbutton';
import { FilterModalComponent } from './filter-modal/filter-modal.component';
import { FollowUpModalComponent } from './follow-up-modal/follow-up-modal.component';
import { NotesModalComponent } from './notes-modal/notes-modal.component';
import { CommentModalComponent } from './comment-modal/comment-modal.component';
import { PeerToPeerModule } from '../peer-to-peer/peer-to-peer.module';
import { SharedModule } from '../shared/shared.module';
import { WasteModuleModule } from '../waste-module/waste-module.module';
import {CalendarModule} from 'primeng/calendar';
import {ProgressSpinnerModule} from 'primeng/progressspinner';
import { Audit2Component } from './audit2/audit2.component';
import { Summary2Component } from './summary2/summary2.component';
import { ToastModule } from 'primeng/toast';
import { AuditOverridesListComponent } from './audit-overrides-list/audit-overrides-list.component';
import { AuditOverridesEditComponent } from './audit-overrides-edit/audit-overrides-edit.component';
import { AuditHomeComponent } from './audit-home/audit-home.component';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { MultiSelectModule } from 'primeng/multiselect';
import { ConfirmationService } from 'primeng/api';
import { NgSelectModule } from '@ng-select/ng-select';
import { ShareModalComponent } from './share-modal/share-modal.component';
import { RiskScoreChartComponent } from './risk-score-chart/risk-score-chart.component';
import {ChartModule} from 'primeng/chart';
import {CheckboxModule} from 'primeng/checkbox';
import { SplitterModule} from 'primeng/splitter';
import { CardModule} from 'primeng/card';
import { ToggleButtonModule } from "primeng/togglebutton";
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { SummaryGraphsComponent } from './summary-graphs/summary-graphs.component';
import { VarianceModule } from '../variance/variance.module';
@NgModule({
declarations: [NursingAuditComponent, CommentModalComponent, SummaryComponent,
AuditComponent, IndividualActivityComponent, FilterModalComponent,
FollowUpModalComponent, NotesModalComponent, Audit2Component, Summary2Component,
SummaryGraphsComponent, AuditOverridesListComponent, AuditOverridesEditComponent,
AuditHomeComponent, ShareModalComponent, RiskScoreChartComponent],
imports: [
CommonModule,
NursingAuditRoutingModule,
TabViewModule,
TreeTableModule,
DialogModule,
TableModule,
MessageModule,
MessagesModule,
FormsModule,
DropdownModule,
TooltipModule,
SelectButtonModule,
PeerToPeerModule,
SharedModule,
WasteModuleModule,
CalendarModule,
ProgressSpinnerModule,
ToastModule,
ConfirmDialogModule,
MultiSelectModule,
NgSelectModule,
ChartModule,
CheckboxModule,
ToggleButtonModule,
SplitterModule,
CardModule,
VarianceModule
],
providers:[
NursingAuditService,
ConfirmationService
],
schemas: [CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]
})
export class NursingAuditModule {
}
urc.component.ts
@Component({
selector: "app-urc",
templateUrl: "./urc.component.html",
styleUrls: ["./urc.component.css"],
providers: [MessageService, ConfirmationService],
})
export class UrcComponent implements OnInit {
varianceNodes: TreeNode[] = [];
commentDialog: boolean = false;
...
...
variance.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { VarianceRoutingModule } from './variance-routing.module';
import { IndexComponent } from './index/index.component';
import { VarianceComponent } from './variance.component';
import {TabViewModule} from 'primeng/tabview';
import {TreeTableModule } from 'primeng/treetable';
import { VarianceService } from '../services/variance.service';
import {DialogModule} from 'primeng/dialog';
import {TooltipModule} from 'primeng/tooltip';
import { UrcComponent } from './urc/urc.component';
import { CommentModalComponent } from './comment-modal/comment-modal.component';
import { ResolutionCodingModalComponent } from './resolution-coding-modal/resolution-coding-modal.component';
import { CompiledDataComponent } from './compiled-data/compiled-data.component';
import { EhrComponent } from './ehr/ehr.component';
import { AdcComponent } from './adc/adc.component';
import { NormalizedDataComponent } from './normalized-data/normalized-data.component';
import {TableModule} from 'primeng/table';
import { FormsModule } from '@angular/forms';
import {MessagesModule} from 'primeng/messages';
import {MessageModule} from 'primeng/message';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import {DropdownModule} from 'primeng/dropdown';
import { FilterModalVarComponent } from './filter-modal-var/filter-modal-var.component';
import {CalendarModule} from 'primeng/calendar';
import { ProgressSpinnerModule } from 'primeng/progressspinner';
import { SharedModule } from '../shared/shared.module';
import { SelectButtonModule} from 'primeng/selectbutton';
import { ToastModule } from 'primeng/toast';
import { NgSelectModule } from '@ng-select/ng-select';
import {AutoCompleteModule} from 'primeng/autocomplete';
import { CheckboxModule } from 'primeng/checkbox';
import {MultiSelectModule} from 'primeng/multiselect';
import {ConfirmDialogModule} from 'primeng/confirmdialog';
import { LinkRecordsModalComponent } from './link-records-modal/link-records-modal.component';
import { LinkTransactionComponent } from './link-transaction/link-transaction.component';
@NgModule({
declarations: [IndexComponent, VarianceComponent, UrcComponent, CommentModalComponent,
ResolutionCodingModalComponent, CompiledDataComponent, EhrComponent, AdcComponent,
NormalizedDataComponent, FilterModalVarComponent, LinkRecordsModalComponent, LinkTransactionComponent],
imports: [
CommonModule,
VarianceRoutingModule,
TabViewModule,
TreeTableModule,
DialogModule,
TooltipModule,
TableModule,
FormsModule,
MessageModule,
MessagesModule,
DropdownModule,
CalendarModule,
SharedModule,
SelectButtonModule,
ProgressSpinnerModule,
ToastModule,
AutoCompleteModule,
NgSelectModule,
CheckboxModule,
MultiSelectModule,
ConfirmDialogModule,
// InputNumberModule
],
providers : [
VarianceService
],
schemas: [CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]
})
export class VarianceModule { }
And this is what the p-dialogue renders when I open it. There should be a whole table underneath the header. The urc.component does render and function inside of the variance.module where it lives.
Solution
In the variance.module.ts
you need to add UrcComponent
to the exports array for it to be accessible inside the nursing-audit.module.ts
variance.module.ts
declarations: [
...
UrcComponent,
...
],
...
exports: [UrcComponent],
...
})
export class VarianceModule { }
Answered By - Naren Murali
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.