I am having two components in the same page so initially i am hiding the second component and displaying only the first component. I am having list of values and displaying it in div which am getting by calling a api(first component). So what i want to achieve here is if i click the first div it should hide the div and i need to display the second component here by calling another api which will give the second component values here i don't want to display the entire values of loop i want to display only the clicked item values in second component from the api. Both the components are present in same page which is kind of tricky for me. Any help?

CodePudding user response：

in the first component emit value using event emitter, and receive in the parent component than pass this value to the second component using Input Output method,

import { Component, Input, OnChanges, OnInit, Output, EventEmitter } from '@angular/core';  
@Output() private data: EventEmitter<any> = new EventEmitter();


 this.data.emit("Value here");

  <app-first-component (data)='data($event) >
                    </app-first-component>

Receive data in parent component and Now pass to other component

CodePudding user response：

You can have a common service and initialize a behaviour subject. In you parent component subscribe to the behaviour subject and in the child component send the data using .next()