Dynamically build div on button click when button is also created dynamically

Question

Working hard on my angular skills. stackoverflow has been really helpfull on getting my first own app together.

My app uses a service:: collectable.service.ts:

export class CollectableService {
    private collectables: Collectable[] = [
        {
            id: 1,
            name: "someName",
            faseOne: false,
            faseTwo: true,
            contact: "Someones name",
            email: '[email protected]'
        },            {
            id: 2,
            name: "someOneElseName",
            faseOne: true,
            faseTwo: false,
            contact: "Someone Elses name",
            email: '[email protected]'
        },

    getCollectables() {
        return this.collectables;
    }
]

My component.html:

<div class="col">
  <div class="btn-group m-3" *ngFor="let item of collectables | pipeOne">
    <button class="btn btn-success">{{item.name}}</button>
  </div>
</div>
<div id="dynamicDiv"></div> // here I want to show the rest of the values out of the array

Example pipeOne (I have one pipe per fase):

  transform(pipeOne: any[], ...args: unknown[]): any[] {
    return pipeOne.filter(p => p.faseOne == true);
  }

Now when the button is clicked, I want to display the other values of the object in the array into div #dynamicDiv. In this example because of faseOne equals true, I need access to the values of the first object in the array, with ID 1. So I can display only the values of object id 1

<div id="dynamicDiv>
    <h1>{{item.name}}</h1>
    <h2>{{item.contact}}</h2>
</div>

etc...

Hope you guys understand and can help me get further

fujy · Accepted Answer · 2022-08-04 22:42:12Z

3

You can add one more property to your component as selectedItem, and assign it on button click, for example;

@Component(...)
export class MyComponent {
  selectedItem: Collectable;
}

And in your MyComponent template

<div class="col">
  <div class="btn-group m-3" *ngFor="let item of collectables | pipeOne">
    <button class="btn btn-success" (click)='selectedItem=item'>{{item.name}}</button>
  </div>
</div>
<div *ngIf='selectedItem'>
    <h1>{{selectedItem.name}}</h1>
    <h2>{{selectedItem.contact}}</h2>
</div>

answered Aug 4, 2022 at 22:42

fujy

5,3015 gold badges33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pvangerrevink Over a year ago

Thank you very much! I had to do this to make it work: selectedItem!: Collectable; With a non-null assertion operator. Otherwise I'd get this error Property has no initializer and is not definitely assigned in the constructor. Thanks again

Collectives™ on Stack Overflow

Dynamically build div on button click when button is also created dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related