How to switch Components inside function

Question

In my Angular project, I have it so that in grid component there is an ngSwitch that states that if there is no row selected, the default option which is row display component, where you can view the data is displayed and if there is a row selected it then switches to row edit component, where you can edit the data. I also have implemented an accept button into the row edit component to save your changes whenever you're done with them. What I can't find out how to do is to revert back to row display component after the row that has been changed has been updated. How would I go about that?

Here's the code in my grid component for the ngSwitch:

    <ng-container *ngFor="let pto of (ptoData | currentEmployee:empInfo[selectedEmployee].EmpKey); let i = index">
      <ng-container [ngSwitch]="isRowSelected(i)">
        <ng-container *ngSwitchCase="false">
          <ng-container *ngIf="pto.type === selectedType">
            <tr pto-row-display [pto]="pto" (click)="selectRow(i)"></tr>
          </ng-container>
        </ng-container>
        <ng-container *ngSwitchCase="true">
          <tr pto-row-edit [pto]="pto" (onDelete)="onDelete($event)" *ngIf="pto.type === selectedType"></tr>
        </ng-container>
    </ng-container>
   </ng-container>

and then here's my save/update function in row edit component:

saveRow(p : PTOData): void {
    this.ptodataService.update(p) 
}

Here's my rowSelected code:

rowSelected: number;
isRowSelected(i: number) {
    return i == this.rowSelected;
}

selectRow(i: number) {
    this.rowSelected = i;
}

Can you show your ngSwitch code at the very least?

Zircon
– Zircon

2017-06-21 18:06:30 +00:00
Commented Jun 21, 2017 at 18:06 — Zircon
– Zircon, Commented Jun 21, 2017 at 18:06
@Zircon updated the original post

rcarcia02
– rcarcia02

2017-06-21 18:11:31 +00:00
Commented Jun 21, 2017 at 18:11 — rcarcia02
– rcarcia02, Commented Jun 21, 2017 at 18:11

rcarcia02 · Accepted Answer · 2017-06-21 19:48:29Z

1

I updated my row-edit component to have :

@Input() rowSelected: number;
@Output() onSave = new EventEmitter<number>();

saveRow(p: PTOData): void {
    //save function code
    this.rowSelected = null;
    this.onSave.emit(this.rowSelected);
}

Then, to my button that the save function is attached to, I added (onSave)="onSave($event)"

I updated my grid component to have:

onSave(i: number) { this.rowSelected = null; }

and finally, I added [rowSelected]="rowSelected" (onSave)="onSave($event)" to my switch statement for row-edit

answered Jun 21, 2017 at 19:48

rcarcia02

9774 gold badges16 silver badges47 bronze badges

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

Comments

snaplemouton · Accepted Answer · 2017-06-21 18:33:35Z

You can use a dynamic component loader if you wish to dynamically change components.

But the way I understand it, you have a list of rows which when selected needs to be editable. In which case, you do not need to use a dynamic component loader.

You should simply give each of your row a "selected" value which is changed dynamically depending on what happens. If you click on a row, it should set their "selected" value to "true" and set the "selected" value of the previously selected row to "false" (Or not if you want multiple row selected at the same time). Furthermore, when you press the "save" button, simply switch the "selected" value of your row to "false".

Additionally, you should use *ngIf/Else instead of ngSwitch if you are using a true/false assertion like in your case. ngSwitch should be used when there are multiple different states.

I've updated my original post with the code that I have for my SelectRow. But, my save function is in a different component then where the ngSwitch is.
You can use the @Output property to pass values from a child component to a parent.

Collectives™ on Stack Overflow

How to switch Components inside function

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related