There are 2 components in my application - principal and menu. The menu component includes a JSON object and HTML code where clicking on an element should trigger a function in the principal component. Upon clicking this function, the selected object should display in the principal component. While I understand this can be achieved within a single component, I am simulating a real-world scenario to address a specific issue. Thank you.
Here is how the components are laid out:
<menu></menu>
<principal></principal>
Code for menu.component:
import { Component, Input } from '@angular/core';
@Component({
selector: 'menu',
template: `Select an animal: <br> <button *ngFor="let item of animals" (click)="getAnimal(item);" style="display:block;">{{item.animal}}</button>`,
styles: [`h1 { font-family: Lato; }`]
})
export class MenuComponent {
animals = [
{"animal":"cat"},
{"animal":"dog"},
{"animal":"horse"}
]
constructor() {}
}
Code for principal.component:
import { Component, Input } from '@angular/core';
@Component({
selector: 'principal',
template: `<h1>Selected animal: {{selectedAnimal}}</h1>`,
styles: [`h1 { font-family: Lato; }`]
})
export class PrincipalComponent {
selectedAnimal: any;
constructor() {}
public getAnimal(item) {
alert(item)
this.selectedAnimal = item.animal;
}
}
This code : https://stackblitz.com/edit/angular-paamqn addresses my question. Now, I have one more query. If I try to call <menu> within the principal component in my actual project, how can I make it function? What changes would be necessary? Can I no longer use #principal?
Rather than:
<principal #principal></principal>
I want to include the html code directly in the principal component:
<!-- html of principal.component.html -->
<menu (callPrincipalMethod)="principal.getAnimal($event)"></menu>
<h1>Selected animal: {{selectedAnimal}}</h1>