0
GSOFT created
I have two components CreateDivisionModalComponent and SubBranchForDivisionComponent, each component display a datatable. My problem is in CreateDivisionModalComponent.html I have a button, when I hit the button, a modal content SubBranchForDivisionComponent will appear. In CreateDivisionModalComponent.html
<button type="button" (click)="getBranch()" >{{l("...")}}</button>
<branchModal #branchModal></branchModal>
CreateDivisionModalComponent.ts
providers:[SubBranchForDivisionComponent],
selector: 'createDivisionModal',
templateUrl: './create-division-modal.component.html'
@ViewChild('branchModal') branchModal: SubBranchForDivisionComponent;
constructor(
private branchComponent: SubBranchForDivisionComponent
) {
super(injector);
}
getBranch(): void {
this.branchComponent.getBranchs();
}
SubBranchForDivisionComponent.ts
@Component({
selector: 'branchModal'})
@ViewChild('branchModal') modal: ModalDirective;
getBranchs() {
this.modal.show();
}
SubBranchForDivisionComponent html
<div bsModal #branchModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="branchModal" aria-hidden="true" [config]="{backdrop: 'static'}">
<!-- <div [@routerTransition]> -->
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="d-flex align-items-center">
<div class="mr-auto col-md-6">
<h3 class="m-subheader__title m-subheader__title--separator">
<span>{{l("Branchs")}}</span>
</h3>
</div>
</div>
</div>
<div class="modal-body">
<div class="m-content">
<div class="m-portlet m-portlet--mobile">
<div class="m-portlet__body">
<form class="horizontal-form" autocomplete="off">
<div class="m-form m-form--label-align-right">
<div class="row align-items-center m--margin-bottom-10">
<div class="col-xl-12">
<div class="form-group m-form__group align-items-center">
<!-- <div class="input-group">
<input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input" [placeholder]="l('SearchWithThreeDot')" type="text">
<span class="input-group-btn">
<button (click)="getBranchs()" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
</span>
</div> -->
</div>
</div>
</div>
<div>
<div class="col-md-12">
<div class="m-separator m-separator--dashed"></div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="BRANCH_CODEFilter">{{l("BRANCH_CODE")}}</label>
<input type="text" class="form-control" id="BRANCH_CODEFilter" name="brancH_CODEFilter" [(ngModel)]="brancH_CODEFilter">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="BRANCH_NAMEFilter">{{l("BRANCH_NAME")}}</label>
<input type="text" class="form-control" id="BRANCH_NAMEFilter" name="brancH_NAMEFilter" [(ngModel)]="brancH_NAMEFilter">
</div>
</div>
<div class="col-md-3">
<button type="button" (click)="loadBranch()"></button>
</div>
</div>
</div>
</form>
<div class="row align-items-center">
<!--<Primeng-Datatable-Start>-->
<div class="primeng-datatable-container"
[busyIf]="primengTableHelper.isLoading">
<p-table #dataTable
(onLazyLoad)="loadBranch($event)"
[value]="primengTableHelper.records"
rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
[paginator]="false"
[lazy]="true"
[scrollable]="true"
ScrollWidth="100%"
[responsive]="primengTableHelper.isResponsive"
[resizableColumns]="primengTableHelper.resizableColumns">
<ng-template pTemplate="header">
<tr>
<th style="width: 130px" [hidden]="!isGrantedAny('Pages.Branchs.Edit', 'Pages.Branchs.Delete')">{{l('Actions')}}</th>
<th style="width: 150px" pSortableColumn="branch.brancH_CODE">
{{l('BRANCH_CODE')}}
<p-sortIcon field="branch.brancH_CODE"></p-sortIcon>
</th>
<th style="width: 150px" pSortableColumn="branch.brancH_NAME">
{{l('BRANCH_NAME')}}
<p-sortIcon field="branch.brancH_NAME"></p-sortIcon>
</th>
<th style="width: 150px" pSortableColumn="branch.addr">
{{l('ADDR')}}
<p-sortIcon field="branch.addr"></p-sortIcon>
</th>
<th style="width: 150px" pSortableColumn="branch.tel">
{{l('TEL')}}
<p-sortIcon field="branch.tel"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-record="$implicit">
<tr>
<td style="width: 130px"
[hidden]="!isGrantedAny('Pages.Branchs.Edit', 'Pages.Branchs.Delete')">
<div class="btn-group dropdown" dropdown container="body">
<button class="dropdown-toggle btn btn-sm btn-primary" dropdownToggle>
<i class="fa fa-cog"></i><span class="caret"></span> {{l("Actions")}}
</button>
<ul class="dropdown-menu" *dropdownMenu>
<li>
<a href="javascript:;"
(click)="viewBranchModal.show(record)">{{l('View')}}</a>
</li>
<li>
<a href="javascript:;" *ngIf="permission.isGranted('Pages.Branchs.Edit')"
(click)="createOrEditBranchModal.show(record.branch.id)">{{l('Edit')}}</a>
</li>
<li>
<a href="javascript:;" *ngIf="permission.isGranted('Pages.Branchs.Delete')"
(click)="deleteBranch(record.branch)">{{l('Delete')}}</a>
</li>
</ul>
</div>
</td>
<td style="width:150px">
<span class="ui-column-title"> {{l('BRANCH_CODE')}}</span>
{{record.branch.brancH_CODE}}
</td>
<td style="width:150px">
<span class="ui-column-title"> {{l('BRANCH_NAME')}}</span>
{{record.branch.brancH_NAME}}
</td>
<td style="width:150px">
<span class="ui-column-title"> {{l('ADDR')}}</span>
{{record.branch.addr}}
</td>
<td style="width:150px">
<span class="ui-column-title"> {{l('TEL')}}</span>
{{record.branch.tel}}
</td>
</tr>
</ng-template>
</p-table>
<div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
{{l('NoData')}}
</div>
<div class="primeng-paging-container">
<p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
#paginator
(onPageChange)="loadBranch($event)"
[totalRecords]="primengTableHelper.totalRecordsCount"
[rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
</p-paginator>
<span class="total-records-count">
{{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
</span>
</div>
</div>
<!--<Primeng-Datatable-End>-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- </div> -->
</div>
When I hit the button, I received the error, any idea could help me well. Thank you. ` Cannot read property 'show' of undefined
`
2 Answer(s)
-
0
Hi @GSOFT
Your code seems fine at the first look. If you can't solve the problem, please send your project to [email protected] and we will take a look at the problem for you.
-
0
I's solved. In Parent Component (HTML) I use
(click)="branchModal.show()". branchModal is child component's selector.
