Display a component after a click($event) Angular 4

Question

I'm trying to create an event on a click button who fired another component, if you click again it reduce the component (a part of the displayed component is always visible).. I know this could be done with [ngClass]='hidden' and everything in the same component but I am not sure whether its the best way in terms of modularity. Thanks in advance

Here's my html:

<div class="daydetail">
     <h1>Detail of the day</h1>
     <button type="button" label="Click"(click)="display('my-displaychild')"></button>
     <div>{{my-displaychild}}</div>
</div>

Here's is my component:

import { DisplayChildComponent } from './displaychild.component';

export class AppliV2Component   { 


    display(vid:DisplayChildComponent) {
           console.log(DisplayChildComponent);
    }


 }

@Maximus thanks I didn't think of ngIf easy :) I ll try it thanks for you help — Emile Cantero, May 30 '17 at 14:13
@Maximus how could you make a $event equal to ngIf ? Could you show me an exemple? — Emile Cantero, May 30 '17 at 14:21

score 28 · Accepted Answer · edited Mar 19 '19 at 10:11

28

I think you should keep it simple with the use of *ngIf and you can pass in the boolean value to the child component to hide only the part you want using the @Input decorator

1.parent HTML

<div class="daydetail">
     <h1>Detail of the day</h1>
     <button type="button" label="Click" (click)="toggleChild()"></button>
     <div>
         <child-component [showMePartially]="showVar"></child-component>
     </div>
</div>

2.parent component

export class AppliV2Component {
    showVar: boolean = true;

    toggleChild(){
        this.showVar = !this.showVar;
    }
 }

3.child component

export class ChildComponent {
    @Input() showMePartially: boolean;

    // don't forget to import Input from '@angular/core'
}

4.child HTML

<div>
    <h1> this part is always visible</h1>
</div>

<div *ngIf="showMePartially">
    <h1> this part will be toggled by the parent component button</h1>
</div>

edited Mar 19 '19 at 10:11

tobias47n9e

2,233
3
28
54

answered May 30 '17 at 14:21

Hamed Baatour

6,664
3
35
47

1

@EmileCantero great! but If you want to display only part of the child component I can update my answer to show you how you can do it – Hamed Baatour May 30 '17 at 14:35
I just updated the answer now! hope with will help you :) – Hamed Baatour May 30 '17 at 14:44
I my friend I've got a question according to the parent component: Is it possible to trigger many variable to the child-component? Like for exemple :
...thanks in advance – Emile Cantero May 31 '17 at 15:36

score 0 · Answer 2 · answered Aug 28 '17 at 07:27

I have a api for Products. I've listed them.And user can add to cart this items.

<div>
  <ul class="list-group">
  <li *ngFor="let product of products" class="list-group-item">
    <button (click)="addToCart(product)" class="btn btn-xs btn-primary pull-right">
      <i class="glyphicon glyphicon-plus"></i>
      Add To Cart
    </button>
    <h5><strong>{{product.productName}}</strong></h5>
    <p> {{product.quantityPerUnit}}</p>
    <h6>{{product.unitPrice}}</h6>
  </li>

method is like this.

addToCart(product:Product){
this.addedProduct=product.productName;
this.notificationsService.success("Successfull",product.productName +" added to CART")
  }

Display a component after a click($event) Angular 4

2 Answers2