-2
I have a menu in my html component as follows: (Menucomponent.html)
<p-tabMenu class="tabMenuDrograria" #menuItems [model]="items" [activeItem]="items[0]"
(click)="ativarMenu()"></p-tabMenu>
<div class="tab-box" *ngIf="menuAtivado() === 'ROSARIO'">
<aop-drogaria-rosario></aop-drogaria-rosario>
</div>
<div class="tab-box cor-base" *ngIf="menuAtivado() === 'SP'">
<aop-drogaria-sao-paulo></aop-drogaria-sao-paulo>
</div>
<div class="tab-box cor-base" *ngIf="menuAtivado() === 'SM'">
<aop-drogaria-santa-marta></aop-drogaria-santa-marta>
</div>
<div class="tab-box cor-base" *ngIf="menuAtivado() === 'DEMAIS'">
<aop-drogaria-demais></aop-drogaria-demais>
</div>
And in the typescript of this piece,(Menucomponent.ts) I have functions that activate this menu and assign their respective ID to the on-screen presentation:
public items: MenuItem[];
public itemAtivado: MenuItem;
ngOnInit() {
this.items = [
{label: 'ROSARIO', id: 'ROSARIO'},
{label: 'SAO PAULO', id: 'SP'},
{label: 'SANTA MARTA', id: 'SM'},
{label: 'DEMAIS', id: 'DEMAIS'},
];
}
ativarMenu()
this.itemAtivado = this.menu['activeItem'];
}
menuAtivado() {
return this.itemAtivado != null ? this.itemAtivado.id : 'ROSARIO';
}
The menu works faithfully. When I click on the Rosario Drugstore tab for example, the component (Drogariarosario.component.html) is displayed and if I click on the SP tab (Drogariasaopaulo.component.html). What happens is that all the components are embedded within them the reuse of another component called Drugstores (Drogarias.component.html). Inside it is an html that organizes all these components. In other words, if I go in any of the components of Realmedia, inside them there will be one . Which brings you to the following HTML code reused for all drugstores:
<div *ngFor="let remedio of remedios" >
<div class="nome"><br/>
Nome do Remédio:{{remedio.nome}}
</div>
<div clas="data">
Data de Fabricação:{{remedio.data}}
</div>
<div class="descricao">
Descrição do Remédio:{{remedio.descricao}}<br/>
</div>
<div class="informacao">
Informação nutricional:{{remedio.informacaoNutricional}}
</div>
</div>
What I need to know is how to limit some information to each menu that is clicked, for example. If I click the drugstore rosary I don’t want it to display the nutritional information of the remedies. I would have to do a *ngIF, but I don’t know how to bring that information from the menu component. How to know which component is being clicked to restrict on *ngIf?