Base solution for your next web application
Open Closed

Loading data in a new component after generating an entity #5440


User avatar
0
system15 created

Hi there I'm trying to load data into a new component after generating an entity using aspnet zero power tools. I've create a customer entity ok and this is shown on the dashboard as a list of customers in a html table format but what I want to do is when I select a row from the customer list to view or edit I want to pass that data to a new custom component I've created that's not a modal like the one that comes out of the box. I've tried to copy the code in the customer modal component but it doesn't work.

Here is the code below customers.component.ts

import{Component, Injector, ViewEncapsulation, ViewChild}from '@angular/core';import{ActivatedRoute}from '@angular/router';import{Http}from '@angular/http';import{CustomersServiceProxy, CustomerDto}from '@shared/service-proxies/service-proxies';import{NotifyService}from '@abp/notify/notify.service';import{AppComponentBase}from '@shared/common/app-component-base';import{TokenAuthServiceProxy}from '@shared/service-proxies/service-proxies';import{CreateOrEditCustomerModalComponent}from './create-or-edit-customer-modal.component';import{ViewCustomerModalComponent}from './view-customer-modal.component';import{appModuleAnimation}from '@shared/animations/routerTransition';import{DataTable}from 'primeng/components/datatable/datatable';import{Paginator}from 'primeng/components/paginator/paginator';import{LazyLoadEvent}from 'primeng/components/common/lazyloadevent';import{FileDownloadService}from '@shared/utils/file-download.service';import * as moment from 'moment';@Component({templateUrl: './customers.component.html', encapsulation: ViewEncapsulation.None, animations: [appModuleAnimation()]})export class CustomersComponent extends AppComponentBase{@ViewChild('createOrEditCustomerModal') createOrEditCustomerModal: CreateOrEditCustomerModalComponent; @ViewChild('viewCustomerModalComponent') viewCustomerModal: ViewCustomerModalComponent; @ViewChild('dataTable') dataTable: DataTable; @ViewChild('paginator') paginator: Paginator; advancedFiltersAreShown=false;filterText='';titleFilter='';firstnameFilter='';lastnameFilter='';homeTelephoneNumberFilter='';mobileTelephoneNumberFilter='';emailAddressFilter='';emergencyContactNumberFilter='';parentTypeFilter='';requestPrescriptionFilter='';address1Filter='';address2Filter='';address3Filter=''; constructor( injector: Injector, private _http: Http, private _customersServiceProxy: CustomersServiceProxy, private _notifyService: NotifyService, private _tokenAuth: TokenAuthServiceProxy, private _activatedRoute: ActivatedRoute, private _fileDownloadService: FileDownloadService ){super(injector);}getCustomers(event?: LazyLoadEvent){if (this.primengDatatableHelper.shouldResetPaging(event)){this.paginator.changePage(0); return;}this.primengDatatableHelper.showLoadingIndicator(); this._customersServiceProxy.getAll(this.filterText,this.titleFilter,this.firstnameFilter,this.lastnameFilter,this.homeTelephoneNumberFilter,this.mobileTelephoneNumberFilter,this.emailAddressFilter,this.emergencyContactNumberFilter,this.parentTypeFilter,this.requestPrescriptionFilter,this.address1Filter,this.address2Filter,this.address3Filter, this.primengDatatableHelper.getSorting(this.dataTable), this.primengDatatableHelper.getSkipCount(this.paginator, event), this.primengDatatableHelper.getMaxResultCount(this.paginator, event) ).subscribe(result=>{this.primengDatatableHelper.totalRecordsCount=result.totalCount; this.primengDatatableHelper.records=result.items; this.primengDatatableHelper.hideLoadingIndicator();});}reloadPage(): void{this.paginator.changePage(this.paginator.getPage());}createCustomer(): void{this.createOrEditCustomerModal.show();}deleteCustomer(customer: CustomerDto): void{this.message.confirm( '', (isConfirmed)=>{if (isConfirmed){this._customersServiceProxy.delete(customer.id) .subscribe(()=>{this.reloadPage(); this.notify.success(this.l('SuccessfullyDeleted'));});}});}exportToExcel(): void{this._customersServiceProxy.getCustomersToExcel(this.filterText,this.titleFilter,this.firstnameFilter,this.lastnameFilter,this.homeTelephoneNumberFilter,this.mobileTelephoneNumberFilter,this.emailAddressFilter,this.emergencyContactNumberFilter,this.parentTypeFilter,this.requestPrescriptionFilter,this.address1Filter,this.address2Filter,this.address3Filter,) .subscribe(result=>{this._fileDownloadService.downloadTempFile(result);});}}

customers.component.html

// This is auto generated using the aspnet zero power tools

viewdetail.component.ts

import{Component, Injector, ViewEncapsulation, ViewChild, Output, EventEmitter}from '@angular/core';import{AppComponentBase}from '@shared/common/app-component-base';import{appModuleAnimation}from '@shared/animations/routerTransition';import{NewOrderModalComponent}from './new-order-modal.component';import{Address}from '../address/address';import{GetCustomerForView, CustomerDto}from '@shared/service-proxies/service-proxies';declare var WizardDemo: any;declare var FormHelper: any;@Component({templateUrl: './viewdetail.component.html', encapsulation: ViewEncapsulation.None, animations: [appModuleAnimation()]})export class ViewdetailComponent extends AppComponentBase{//variables calendarValue: Date deliveryAddres: string dummyAddresses=[] active=false; //Display modal on the customer component when the new order button is clicked. @ViewChild('newOrderModal') newOrderModal: NewOrderModalComponent; @Output() modalSave: EventEmitter<any>=new EventEmitter<any>(); item: GetCustomerForView; constructor( injector: Injector ){super(injector); this.item=new GetCustomerForView(); this.item.customer=new CustomerDto();}ngOnInit(){this.dummyData()}}

viewdetail.component.html doesn't render{{item.customer.firstname}}based on the row selected in the list

{{item.customer.firstname}}

4 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    You can check audit log detail modal for this; See, <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/app/admin/audit-logs/audit-logs.component.ts#L58">https://github.com/aspnetzero/aspnet-ze ... ent.ts#L58</a> <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/src/app/admin/audit-logs/audit-log-detail-modal.component.ts">https://github.com/aspnetzero/aspnet-ze ... mponent.ts</a>

  • User Avatar
    0
    system15 created

    I'm trying to load the data into a new component without using a modal. So it's just another page that shows details. Any ideas. Out of the box it seems to be a modal for a detailed page.

  • User Avatar
    0
    alper created
    Support Team

    hi,

    See these links may enlighten you for passing data

    <a class="postlink" href="http://www.angulartutorial.net/2017/12/3-simple-ways-to-share-data-through.html">http://www.angulartutorial.net/2017/12/ ... rough.html</a> <a class="postlink" href="https://www.tektutorialshub.com/angular-passing-parameters-to-route/">https://www.tektutorialshub.com/angular ... -to-route/</a> <a class="postlink" href="https://www.thepolyglotdeveloper.com/2016/10/passing-complex-data-angular-2-router-nativescript/">https://www.thepolyglotdeveloper.com/20 ... ivescript/</a> <a class="postlink" href="https://yakovfain.com/2015/11/11/angular-2-passing-data-to-routes/">https://yakovfain.com/2015/11/11/angula ... to-routes/</a>

  • User Avatar
    0
    system15 created

    Thank you very much. @alper