Angular - How to reuse information from one component in another to realize condition?

Question

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?

Answer 1

One idea would be to have inside the drugstore component an @Input() for each attribute you want to display, so you can put a *ngIf to hide when you’re not going to use, I don’t know what your drugstore component looks like, but it would look more or less like this from what I understood of the architecture that you are using, in the drugstore.componentts.

@Input() exibeNome: boolean;
@Input() exibeData: boolean;
@Input() exibeDesc: boolean;
@Input() exibeInfo: boolean;

@Input comes from@angular/core';

There inside the drugstore-too-component.html and in the other components that calls the drugstore.component.html you put so:

<aop-drogaria [exibeNome]="True" [exibeData]="False" [exibeDesc]="True" [exibeInfo]="False"></aop-drogaria>

and finally in your html code of the drugstore.component.html you put like this:

<div *ngFor="let remedio of remedios">
    <div *ngIf="exibeNome" class="nome"><br />
        Nome do Remédio:{{remedio.nome}}
    </div>
    <div *ngIf="exibeData" clas="data">
        Data de Fabricação:{{remedio.data}}
    </div>
    <div *ngIf="exibeDesc" class="descricao">
        Descrição do Remédio:{{remedio.descricao}}<br />
    </div>
    <div *ngIf="exibeInfo" class="informacao">
        Informação nutricional:{{remedio.informacaoNutricional}}
    </div>
</div>