Quiero pasar datos cuando se hace clic en la tarjeta (la tarjeta tiene imágenes, identificación, nombre y más) del componente principal (nfts) al componente secundario (principal) y presentar la información en el componente secundario.

Intenté usar @Input() pero no obtengo el valor en el componente secundario, y también intenté usar EventEmitter pero no pude pasar el valor a través de la variable.emit (valor) o hay una mejor manera de lograr esto

nft.html

 <app-main [nftId]="ItemClicked"></app-main> <div class="container"> <div class="collectionCard" *ngFor="let data of nftData" (click)="getId(data.token_id,data.image_url,data.name)"> <img src="{{data.image_url}}" alt="nf img" > <div class="details"> <div class="name"> {{data.name}} <div class="id">#. {{data.token_id}}</div> </div> </div> <div class="priceContainer"> <img src="assets/assets/weth.png" alt="symbol" class="weithImage"> <div class="price">{{data.traits[0]?.value}}</div> </div> </div> </div>

nft.ts

 export class NftsComponent implements OnInit { nftData:any =[]; ItemClicked:any = []; getdata(){ fetch('https://testnets-api.opensea.io/api/v1/assets?asset_contract_address=0x617d411DE5a4D5b668EBAa22Edc7bCdbb88285c4&order_direction=desc&offset=0&limit=5') .then(response =>response.json()) .then(response =>{ const data = response.assets; this.nftData = data; console.log(this.nftData); }) .catch(err =>console.error(err)) } getId(id:any,img:string,name:string){ this.ItemClicked = id; this.ItemClicked = img; this.ItemClicked = name; } constructor() { } ngOnInit(): void { this.getdata(); }

principal.ts

 export class MainComponent implements OnInit { @Input() nftId:any; constructor() { } ngOnInit(){ console.log( this.nftId); } }

Quiero recibir datos en main.ts

enlace stackbliz - https://github.com/HemanthGirimath/nft-cryptoPunk-clone