deals-transaction.component is rendered by app-transactions-details and deals-transaction.component renders the app-deals-approval component.

How do I get the deals-transaction.component testPage() result or output and pass the data to app-deals-approval component and access the value on app-deals-approval component ngOnit ?

Is @Viewchild a good solution ? should it be pass as input ? . Thanks.

Thanks .

#deals-transaction.component html (this renders the app-deals-approval) I want to pass the data to app-deals-approval

  <div>
    <app-deals-approval > </app-deals-approval>
  </div>

#deals-transaction.component.ts

@Component({
  selector: 'app-deals-transaction',
  templateUrl: './deals-transaction.component.html',
  styleUrls: ['./deals-transaction.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DealsTransactionComponent implements OnInit {
  @ViewChild(TableMultiSortComponent, { static: true }) tableMultiSortComponent: TableMultiSortComponent;
  transactionSubscripion: Subscription;
  tableOptions: any;
  @Input() transaction: any;
  isLoading: boolean;
  accountId: any;
  dealDetails: any;

  constructor(
    private _snackBar: MatSnackBar,
 
    private dealService: DealService,
 
  ) {}
  ngOnInit(): void {
    this.leaseId = this.transaction.leaseId;
    this.propertyId = this.transaction.propertyId;   
    const actions = ["Copy", "Delete", "For Approval"];
    this.testPage();
  }
  private testPage() {
    this.searchInput = '';
    const status = 'ForApproval'
    this.isLoading = true;
    this.dealService
      .getAllDeals(
        status,
        this.accountId,
        this.transaction.id,
        this.table.pageIndex   1,
        this.table.pageSize,
        this.searchInput,
        this.table.sortParams,
        this.table.sortDirs
      )
      .pipe(finalize(() => (this.isLoading = false)))
      .subscribe((res) => {
        this.testPageOutput = res.items;
      }, (err) => this.notificationService.showError(err)
    );
  }

#deals-approval.component.ts code

@Component({
  selector: 'app-deals-approval',
  templateUrl: './deals-approval.component.html',
  styleUrls: ['./deals-approval.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DealsApprovalComponent implements OnInit {
  transactionSubscripion: Subscription;
  @ViewChild(TableMultiSortComponent, { static: true }) tableMultiSortComponent: TableMultiSortComponent;
  tableOptions: any;
  hasApproval = false;
  @Input() transaction: any;
  @Input() dataTest: any;
  isLoading: boolean;
  DEAL_TYPES = DEAL.TYPES;
  totalDeals : number;

  dealType$: Observable<string> = new Observable<string>()
  firstSub: Subscription;
  accountId: any;
  data: any;
  searchInput: string;
  table: any;
  dealType: string;
  totalDealsForApproval = 0;
  constructor(
    private dealService: DealService,
    private notificationService: NotificationService,
    private trasactionService: TransactionService,
    private route: Router,
    private dealTransactionService: DealTransactionService
    
  ) { }

  ngOnInit(): void {
 
 }

CodePudding user response：

Inside deals-transaction.component

<app-deals-approval [testPageOutput]="testPageOutput"> </app-deals-approval>

Inside app-deals-approval component

// use set since your `testPage()` is generating result in async
_testPageOutput: any;
@Input() set testPageOutput(value: any) {
    this._testPageOutput = value;
    // other operation you want to perform upon `testPageOutput` value changes
}

CodePudding user response：

It's because the testPageOutput is set by an asynchronous task in DealsTransactionComponent - that's why it is not available in ngOnInit() of DealsApprovalComponent. Try to access it in ngOnChanges() instead of ngOnInit() of DealsApprovalComponent.

@Component({
  selector: 'app-deals-transaction',
  templateUrl: './deals-transaction.component.html',
  styleUrls: ['./deals-transaction.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DealsTransactionComponent implements OnInit, OnChanges {
  testPageOutput: any;

  constructor(
      private _snackBar: MatSnackBar,
      private dealService: DealService) {}

  ngOnInit(): void {
    this.testPage();
  }

  private testPage() {
    this.dealService.getAllDeals(/*...*/)
      .pipe(finalize(() => (this.isLoading = false)))
      .subscribe(
         (res) => {
           this.testPageOutput = res.items;
         }, 
         (err) => this.notificationService.showError(err)
      );
  }
}

Template:

<div>
  <app-deals-approval [testPageOutput]="testPageOutput"> 
  </app-deals-approval>
</div>

DealsApprovalComponent

@Component({
  selector: 'app-deals-approval',
  templateUrl: './deals-approval.component.html',
  styleUrls: ['./deals-approval.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DealsApprovalComponent implements OnInit {

  @Input() testPageOutput: any;

  constructor() { 
  }

  ngOnInit(): void {
  }

  ngOnChanges(changes: any): void {
    if (changes.testPageOutput?.currentValue) {
      // do your stuff here
    }
  }
}