hidding button of another view angular2

Question

hello dears geek i have a problem with angular2: I'm developing an application in angular2

(menuComponent, menuView.html)
(listProductComponent, listProductView.html)
(detailProductComponent, detailProductView.html)

i have a button in the menuView.html for add new Product like this

<ul class="nav nav-tabs">
    <li><a class="active" [routerLink]="['ListeProduct']">Product</a></li>
    <li><a [routerLink]="['ListeArticle']">Articles</a></li>
    <li><a [routerLink]="['ListeClients']">Clients</a></li>   
</ul>
<button  type="button" (click)="Add()" class="btn btn-primary    ajouter">Add</button>`

my listProductView.html is:

<table class="table table-striped">
     <thead>
      <tr>
        <th>Code Product</th>
        <th>Product Name</th>
        <th>Cost</th>
    </tr>
</thead>
    <tr *ngFor="#product of products" >
        <td>{{product.code}}</td>
        <td>{{product.name}}</td>
        <td>{{product.cost}}</td>
    </tr>   
</table> `

what I need is when I click on one product of the listProduct to see the product detail in detailProductView.html is to hide the button Add from menuView.html.

This is very similar to: http://stackoverflow.com/questions/35525472/how-to-inject-a-component-instance-in-angular2/35525956#35525956 — martin, Mar 01 '16 at 14:05

score 2 · Accepted Answer · edited Sep 27 '17 at 11:27

I think that you could leverage a shared service with an EventEmitter property. One component will emit an event based on it and this other component will be notified by subscribing the EventEmitter. When the event is received, this component can set a property used to show / hide the button...

Shared service
```
@Injectable()
export class MenuService {
  addButtonEvent: EventEmitter = new EventEmitter();
}
```
Don't forget to define the corresponding provider in the boostrap function to be able to share the same instance of the service for the whole application: `bootstrap(App, [ MenuService ]);

MenuComponent component

@Component({ ... })
export class MenuComponent {
  showAdd: boolean = false;
  constructor(menuService: MenuService) {
    menuService.addButtonEvent.subscribe(
      (showAdd) => {
        this.showAdd = !this.showAdd;
      }
   );
 }

}

ProductListComponent component:

export class ProductListComponent {
  constructor(private service: MenuService) {
  }

  toggleAddButton():void {
    this.addButton = this.addButton;
    this.service.addButtonEvent.emit(this.addButton);
  }
}

See this question for more details of the implementation of this approach:

hidding button of another view angular2

1 Answers1

Linked