I want to pass data when clicked on the card(card has images, id, name, and more) from the parent(nfts) to the child(main) component and render the information in the child component.
I tried to use @Input() but I don't get the value on the child component, and also tried using the EventEmitter but I could not pass the value via the variable.emit(value) or is there a better way achieve this
nft.html
<app-main [nftId]="ItemClicked"></app-main>
<div >
<div *ngFor="let data of nftData"
(click)="getId(data.token_id,data.image_url,data.name)">
<img src="{{data.image_url}}" alt="nf img" >
<div >
<div >
{{data.name}}
<div >#. {{data.token_id}}</div>
</div>
</div>
<div >
<img src="assets/assets/weth.png" alt="symbol" >
<div >{{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();
}
main.ts
export class MainComponent implements OnInit {
@Input() nftId:any;
constructor() { }
ngOnInit(){
console.log( this.nftId);
}
}
I want to receive data in the main.ts
stackbliz link - https://github.com/HemanthGirimath/nft-cryptoPunk-clone
CodePudding user response:
You need to add implement ngOnchanges method inside the child component
export class MainComponent implements OnInit,OnChanges{
@Input() nftId:any;
constructor() { }
ngOnInit(){
console.log( this.nftId);
}
ngOnChanges(change: SimpleChanges) {
if(change["nftId"]) {
console.log(change["nftId"]);
}
}
}
CodePudding user response:
First declare Object
ItemClicked : any;
getId(id:any,img:string,name:string){
this.ItemClicked.id = id;
this.ItemClicked.img = img;
this.ItemClicked.name = name;
}
CodePudding user response:
I had solved the problem.