I want to use this function when hovering with the mouse over <li> to run a detail component.
findId(id:number){
console.log(id)
}
when this function is running must send id to this component:
export class DetailComponent implements OnInit {
@Input() id:number;
constructor() { }
ngOnInit() {
}
}
and this is HTML file:
<ul>
<li *ngFor="let cat of cats" >
<a (mouseover)="findId(cat.id)">{{cat.name}}</a>
</li>
</ul>
How can I do this?
References to my answer is taken from the official documentation. Going through this link would help.
There can be different scenarios. Lets have a look at them.
Scenario 1: DetailComponent is the child of your current component
As described by @nguyen in his answer
Since you have defined @input decorator in your DetailComponent, if the DetailComponent is the child of your current component and the selector of your DetailComponent is suppose app-detail then in your html template you will call the detail component and pass the value
<app-detail[id]="selectedId"></app-detail>
provided selectedId is the class variable of your current component which holds the id that you want to pass to the DetailComponent
i.e suppose your function
findId(id:number){
console.log(id)
}
is working and you can see the id in console, then modify your function
findId(id:number){
console.log(id);
this.selectedId = id;
}
For Scenario 2 and Scenario 3 have a look at the documentation where you have the choice of either passing the values using event emitters.
Otherwise what I like to do is I create a service and that service holds the values that are common to multiple components. Then I import the service in the components that uses these values.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataStoreService {
selectedId: string;
}
In your Current Component:
export class CurrentComponent implements OnInit {
constructor(public dataStoreService: DataStoreService) { }
ngOnInit() {}
findId(id:number){
this.dataStoreService.selectedId = id;
}
}
Then in you DetailComponent import the service
export class DetailComponent implements OnInit {
constructor(public dataStoreService: DataStoreService) { }
ngOnInit() {}
}
And in your DetailComponent html template
<div>{{dataStoreService.selectedId}}</div>
if CurrentComponent and DetailComponent are siblings then they both will import this service and use the same variable as a model which will be updated or displayed by the components.
Assume that the DetailComponent is defined with the selector app-detail
You need to assign the id from the input to it
<app-detail [id]="assignedId"></app-detail>
and in the component, where you contain the detail component, you need to assign the value to assignedId (or whatever you name it)
public assignedId;
public findId(id:number) {
this.assignedId = id;
}
hope this help
this.assignedId = id; pass it programmatically. In any case, you need to define the input of the component. If you don't define the template of the component anywhere, it won't be appeared
DetailComponent? Where will the component be put in the template?lirun the component and show it in appcomponent.html