Create a div in HTML when calling a function in Angular 2

Question

So what's going is that I have a list of orders which I show in a view. When I click on the order id for a specific order in the list I want to have it expand with more detailed information about the order. I've created a order view which I want to load in the div that expands but I was thinking the smart way to do this is to have a function creating a div when the order id is clicked. This is the template for the component:

<div class ="order" *ngFor="let order of orders | paginate: {itemsPerPage: 20, currentPage: pageNumber, totalItems: totalNumberOfOrders}">
    <span class="orderOrderId">{{order.orderId}}</span>
</div>

Basically I want (click)="loadOrderView(order.orderId)" and then the function should do:

loadOrderView(orderId): {
"Create a div and load it in my html under the specified order"
}

I don't want to use bootstrap, this should be easy enough but I don't really know how to proceed. What is the best and easiest way to achieve what I want, which in the end is basically for the order to expand and more information be presented.

I'm sure 1/10 of the code would allow to demonstrate the problem as well stackoverflow.com/help/mcve — Günter Zöchbauer
– Günter Zöchbauer, Commented Jul 6, 2017 at 8:36
I think you should just add a component for the order details and use *ngIf <div class="order" *ngFor="....; let i=index"><order-detail *ngIf="expanded[i]"></order-detail></div>. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jul 6, 2017 at 8:46
Can I load the component just by writing <order-detail...? — schivv
– schivv, Commented Jul 6, 2017 at 9:06

Alireza · Accepted Answer · 2017-07-06 09:31:16Z

1

You should let Angular deal with DOM manipulation. So you should have a inner div with *ngIf and when the data comes from the server, you should set it to true and let angular render inner div.

For example:

<div class ="order" *ngFor="let order of orders | paginate: {itemsPerPage: 20, currentPage: pageNumber, totalItems: totalNumberOfOrders}" 
    (click)="loadOrderView(order)">
    <span class="orderOrderId">{{order.orderId}}</span>
    <div *ngIf="order.hasDetail">
        <order-detail [data]="order"></order-detail>
    </div>
</div>

Inside your component:

loadOrderView(order) {
    // fetch data 
  order.hasDetail = true;
}

edited Jul 6, 2017 at 9:31

Alireza

105k27 gold badges280 silver badges173 bronze badges

answered Jul 6, 2017 at 8:47

Bunyamin Coskuner

8,8892 gold badges31 silver badges50 bronze badges

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

6 Comments

schivv Over a year ago

And then I want to load a component in that div that expands if hasDetail is true. How do I do that from inside the function?

Bunyamin Coskuner Over a year ago

Just put your component inside that div. When the ngIf statement becomes true, angular will render that component.

schivv Over a year ago

How do I load a component in the html? Can I just write ` <name of component></name of component>`?

schivv Over a year ago

Okey perfect thank you. Let's see how that works out.

schivv Over a year ago

<div *ngIf="hasDetail"> <order [order]="order"></order> </div> Would this transfer the order for the selected order to the order component? So I can load the correct order details? Edit: I meant the order, not the orderId

|

Collectives™ on Stack Overflow

Create a div in HTML when calling a function in Angular 2

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related