web-dev-qa-db-fra.com

Afficher un composant après un clic ($ event) Angular 4

J'essaie de créer un événement sur un bouton qui a déclenché un autre composant, si vous cliquez à nouveau, il réduit le composant (une partie du composant affiché est toujours visible) .. ] = 'caché' et tout dans le même composant mais je ne suis pas sûr que ce soit le meilleur moyen en termes de modularité . Merci d'avance

Voici mon 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>

Voici mon composant:

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

export class AppliV2Component   { 


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


 }
angularmouseclick-event
5
Emile Cantero

Je pense que vous devriez rester simple avec l'utilisation de *ngIf et vous pouvez transmettre la valeur booléenne au composant enfant pour masquer uniquement la partie souhaitée à l'aide du décorateur @Input.

HTML 1.parent

<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. composant

export class AppliV2Component {
showVar: boolean = true;
toggleChild(){
this.showVar = !this.showVar;
 }
}

3. composant enfant

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>
12
Hamed Baatour

J'ai une api pour les produits. Je les ai listés.Et l'utilisateur peut ajouter ces articles au panier. 

<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>

méthode est comme ça. 

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