how to make a button from a list disappear?

Question

i have a list that contains in every line a button. i want to make the button disappear after clicking on it

<div *ngFor="let activity of activities">
  <a (click)="startActivity(activity)"
   <fa-icon class="theme-list__action-icon fa-lg" icon="play"></fa-icon>
        </a>
    </div>

how to make this icon disappear after clicking on it? i tried to add *ngIf but it made all the icons disappear not the only the one i clicked

score 0 · Answer 1 · answered Jun 15 '21 at 12:49

You need to add some boolean flag on your icon and make it false by clicking on a. In your case (i assume) you need to set some property of activity to false and add it to ngIf directive on your icon.

A simple example:

app.component.html

<button (click)="showBlock = false">Hide the block below</button>
<div *ngIf="showBlock">
  Some block
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  showBlock = true;
}

Stackblitz example

score 0 · Answer 2 · answered Jun 15 '21 at 13:31

0

Please find below code snippet. I have tested this. It works fine.
HTML:

<div *ngFor="let activity of activities">
<a (click)="startActivity(activity, ref)">
<div class="theme-list__action-icon fa-lg" icon="play" #ref>Hi</div>
    </a>
</div>

TypeScript:

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  activities = ["Hello","Hi"];
  startActivity(val,ref1){
  console.log(ref1);
  ref1.style.display='none';
 }
 }

You need to replace activities with your own activities and fa-icon tag. Basically what i did, i stored a reference to individual icon element and when element is clicked i modified its properties. Here is link for Demo

answered Jun 15 '21 at 13:31

anand shukla

666
5
14

`ref1.style.display='none'` is not an angular way of doing thing. Angular does not encourage to directly manipulate DOM/DOM attribute. – juana pu Jun 15 '21 at 13:51
It does not encourage only when you don't know what you are doing. – anand shukla Jun 16 '21 at 04:40
Sorry, I did not try to argue something, just to share the info I know. Here is a [stackoverflow discussion](https://stackoverflow.com/questions/50558124/whats-the-difference-between-displaynone-and-ngif-false/50558726) talking about display 'none' vs *ngIf in angular. Angular has `view` concept, basically element manipulation supposes to be happened at the level above `view` not directly go down to manipulate DOM. See [angular's ngIf Directive](https://github.com/angular/angular/blob/a92a89b0eb127a59d7e071502b5850e57618ec2d/packages/common/src/directives/ng_if.ts#L194) which create/clear view – juana pu Jun 16 '21 at 11:49

juana pu · Answer 3 · 2021-06-16T11:53:05.447

If you can explain more about what are you going to do would be helpful, or post the whole code how you did it that makes a click the whole list disappears so that I can get some hint what you might want to do.

To what you've described, there are couple ways you can achieve it. One way to manipulate the array (activities) every time clicks. see stackblitz

  activities = [1, 2, 3, 4];
  startActivity(activity: any) {
    // Remove the clicked activity from the array.
    this.activities = this.activities.filter(value => value !== activity);
  }

Another way like what @Roman A. suggested, giving a tag for each activity. see stackblitz

<div *ngFor="let activity of activities">
  <a (click)="startActivity(activity)">
    <button *ngIf="activity.show">Icon {{activity.value}}</button>
  </a>
</div>

export class AppComponent {
  activities: ActivityModel[] = [
    { value: 1, show: true },
    { value: 2, show: true },
    { value: 3, show: true },
    { value: 4, show: true }
  ];
  startActivity(activity: ActivityModel) {
    activity.show = false;
  }
}

interface ActivityModel {
  value: any;
  show: boolean;
}

Note:

using <a> tag as a button and binding event on it should be caution, if you are having a href property on it, it may mess up with the event binding.
angular *ngFor always recommended to add a trackBy function, see how to use trackBy

how to make a button from a list disappear?

3 Answers3