I have an issue I have a component which has router-outlet, the next button on main component and on clicking next I want to save data of router component

main.component.html

<div >
    <p-card>
        <ng-template pTemplate="title">
            Create
        </ng-template>    
            <div >
                <div >
                    <p-toast></p-toast>                   
                <p-steps [model]="items" [readonly]="false"  [(activeIndex)]="Active"></p-steps><br />                   
                </div>
                
            </div>
            <div  align="right">
                <p-button *ngIf="showNextButton" label="Next"  (onClick)="nextPage()" icon="pi pi-angle-right" iconPos="right"></p-button>
                <p-button *ngIf="showBackButton" label="Back" (onClick)="prevPage()" icon="pi pi-angle-left" ></p-button>
                <p-button label="Submit" ></p-button> 
                <p-button label="Save"  (onClick)="save()" type="submit"></p-button>
            </div>
            
        <ng-template pTemplate="content">
            <router-outlet (activate)="onActivate($event)"></router-outlet>
        </ng-template>
        <ng-template pTemplate="footer">
            <div  align="right">                           
                <p-button *ngIf="showNextButton" label="Next"  (onClick)="nextPage()" icon="pi pi-angle-right" iconPos="right"></p-button>
                <p-button *ngIf="showBackButton" label="Back" (onClick)="prevPage()" icon="pi pi-angle-left" ></p-button>
                <p-button label="Submit"  ></p-button> 
                <p-button label="Save"  (onClick)="saveWorkflow()" type="submit"></p-button>
            </div>
        </ng-template>
    </p-card>
</div>

main.component.ts

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { MenuItem, PrimeIcons } from 'primeng/api';
import { MessageService } from 'primeng/api';
import { WorkflowFacade } from 'src/app/State/Workflow/workflow.Facade';

@Component({
  selector: 'app-form-tabs',
  templateUrl: './form-tabs.component.html',
  styleUrls: ['./form-tabs.component.scss'],
})
export class MainComponent implements OnInit {
  items: MenuItem[];
  Active: number = 0;
  value: number = 0;
  showBackButton:boolean=false;
  showNextButton:boolean=true;
  constructor(public workflow: WorkflowFacade,private router:Router) {}
  //@ViewChild(CreateWorkflowComponent) child: CreateWorkflowComponent;
  saveWorkflow() {
    //child is set
    //this.child.SaveWorkflow();
  }

  ngOnInit(): void {
    this.items = [
      {
        label: 'Basic Request Info',
        id: 'basicinfo',
        routerLink:'create-workflow'
      },
      {
        label: 'Form',
        id: 'tabformId',
        routerLink:'prpo-create'
      },
    ];
  }
  
  onActivate(event:any){
    
  }
  nextPage() {
    this.saveWorkflow();
    this.Active  = 1;
    this.showBackButton=true;
    this.showNextButton=false;
    this.router.navigate(['main/prpo-create']);
    
  }
  prevPage() {
    if(this.Active>0){
      this.Active -= 1;
      this.showBackButton=false;
      this.showNextButton=true;
      this.router.navigate(['main/create-workflow']);
    }
  }
}

now I have CreateWorkflow component on which all control are available and save method also on same component. I want to save the data on click of Next button but I can't access those control and methods from main component.

Can someone help me and suggest me what I can do to save data

CodePudding user response：

Your logic is probably wrong. Instead of trying to access to your component directly, you could for example create a service, which could propagate data/action between main & child component ( thanks to a Subject/BehaviorSubject ). Your child will listen this observable and save when you emit the event with the main component trough the service.

CodePudding user response：

1. Create a service (Injectable) and inject it into both components.

2. The component that stores the data will store it on the service instead of locally.

3. The component with the Save button will then be able to access the data on the service.

It's a standard way of communicating between components when you can't use other methods like Inputs and Outputs. I usually name it something like "WorkflowDataService".