hide element on template into X component by Y component angular 7

Question

I need to show/hide menu icon in menu.components by app.component

So my menu html component code:

<div class="menu-top" (click)="emitOpenMenu()"><!-- (click)="openMenu()" -->
  <div class="hamburgher-content">
    <i class="fas fa-bars"></i>
  </div>
  <div>
    <i class="icon icon-sv-logo"></i>
  </div>
  <div>
    <i class="fas fa-bell" hidden="true" [routerLink]="'notifications'"></i>
  </div>
</div>

My app.component code:

if (scanData === null) {
        menu hide
        // run code for hide menu icon here in menu compoonent
      } else {
        menu show
        // run code for show menu icon here in menu component

}

app.component html (parent)

<mat-sidenav-content>
      <div #target></div>
      <div *ngIf="showMenuBool">
        <sv-menu (openMenuOutput)="openMenu()"></sv-menu>      
      </div>
      <div style="margin-top:60px;">
        <div class="fab-scan" *ngIf="showFab">
          <button mat-fab color="primary" (click)="openScanDialog()"><i class="fas fa-barcode"></i></button>
        </div>       
        <div class="fab-up" *ngIf="showUp">
            <button mat-fab color="primary" (click)="gotoTop(target)"><i class="fas fa-arrow-up"></i></button>
        </div>
        <router-outlet (activate)="RoutesChanged()"></router-outlet>        
      </div>
  </mat-sidenav-content>

there is a way to get class by dom with angular ? I'm new about angular 7, thanks

Getting the DOM elements in code is not the Angular way of doing things. You should use `*ngIf` or `[hidden]` instead. Tell us under which condition each element should be shown or hidden. — ConnorsFan, Mar 30 '19 at 15:03
hidden or ngif in the same component, i need to hide/show element by another component — Mr. Developer, Mar 30 '19 at 15:04
If "another component" is the parent component, define `@Input` properties in the child, and bind these properties to values in the parent template. In the child, refer to the input properties with `*ngIf` or `[hidden]`. — ConnorsFan, Mar 30 '19 at 15:06
I need to change element in the parent by child, there is a way ? — Mr. Developer, Mar 30 '19 at 15:08
Please show the parent template, the child template, which elements must be shown/hidden, and under which conditons. — ConnorsFan, Mar 30 '19 at 15:11
edited and added, the icon menu that i want hide/show it's inside sv-menu compoonent — Mr. Developer, Mar 30 '19 at 15:12
See this to get an idea how you can share data between components: https://stackoverflow.com/a/46049546/1791913 — FAISAL, Mar 30 '19 at 15:30

score 0 · Answer 1 · answered Mar 30 '19 at 15:15

I presume that your component is child component of a . You can have variable inside app.component.ts like this:

menuVisible: boolean = true;

and the set this variable to true or false inside your method with if statement:

scanDataMethod(scanData) {
    if (scanData === null) {
        this.menuVisible = false;
    } else {
        menu show
       // run code for show menu icon here in menu component
       this.menuVisible = true;
    }
}

and then you can use this menuVariable as a @Input() inside menu.component.ts:

app.component.html:

<menu [menuVisible]="menuVisible"> </menu>

menu.component.ts:

@Input() menuVisible: string;

and you can use this menuVisible input variable inside menu.component.html:

<div *ngIf="menuVisible" class="menu-top" (click)="emitOpenMenu()"><!-- (click)="openMenu()" -->
    <div class="hamburgher-content">
        <i class="fas fa-bars"></i>
    </div>
    <div>
        <i class="icon icon-sv-logo"></i>
    </div>
    <div>
        <i class="fas fa-bell" hidden="true" [routerLink]="'notifications'"></i>
    </div>
 </div>

Hope this helps!!

hide element on template into X component by Y component angular 7

1 Answers1