Change detection from child to parent - html

Question

I am trying to enable functionality in my UI which will display the selections dynamically as they are selected/de-selected.
import { Wizard } from './report-common';
import { Router } from '#angular/router';
import { DataService } from './../shared/service/data.service';
import { TreeNode } from './../shared/dto/TreeNode';
import { Component, OnInit } from '#angular/core';
import { Subject } from 'rxjs/Subject';
import 'rxjs/Rx';
import * as STEPS from '../shared/constants';
import html from './report-builder.component.html';
import css from './report-builder.component.css';
#Component({
selector: 'report-builder',
template: html,
providers: [DataService],
styles: [css]
})
export class ReportBuilderComponent implements OnInit {
selectedProductLine: TreeNode<string>[];
rightside: Wizard = new Wizard([STEPS.PRODUCT_LINE]);
productLineSubject = new Subject<TreeNode<string>[]>();
//this allows the html to access the constants
HTML_STEPS = STEPS;
constructor (private dataService: DataService, private router: Router) {}
ngOnInit() {
this.productLineSubject.subscribe((productline) => this.productLineChange(productline));
}
public productLineChange(productLine: TreeNode<string>[]):void {
this.selectedProductLine = productLine;
this.rightside.setSelection(this.extractDisplayNames(productLine), STEPS.PRODUCT_LINE);
}
private extractDisplayNames <T>(nodes: TreeNode<T>[]): string[] {
return nodes.map(node => node.displayName);
}
}
The html relevant code:
<div *ngFor="let step of rightside.steps">
<li *ngIf="!step.hidden">
<rightside-component class="side-button" [selectionSubject]="step.selections">
</rightside-component>
</li>
</div>
The "Wizard" structure is as follows: (report-common.ts)
import { DataService } from './../shared/service/data.service';
import { TreeNode } from './../shared/dto/TreeNode';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
export class WizardStep {
selections: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
}
export class Wizard {
currentComponent:WizardStep;
steps:WizardStep[];
public setSelection(selections:any[], component:string) {
let componentStep = this.steps.find(step => step.component === component);
if(!componentStep) { return; }
componentStep.selections.next(selections);
}
}
Rightside-component.ts:
export class RightSideComponent implements OnInit {
selections: string[];
#Input() selectionSubject: BehaviorSubject<string[]>;
constructor(private cd: ChangeDetectorRef) {}
ngOnInit() {
this.selectionSubject.subscribe((selections) => {
this.selections = selections;
this.cd.detectChanges();
});
}
}
Rightside.component.html :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
<ul class="selection-list">
<li *ngFor="let item of selections">
<button class="btn">
<i class="fa fa-close">
{{item}}
</i>
</button>
</li>
</ul>
</div>
Here, I have added a delete icon in front of every item in the list. Whenever the button is clicked, not only should the item disappear from the list, but it should get de-selected from the original structure that is changing it.
I tried using changedetection here but that didn't work as expected.
I basically want to do something similar to this http://next.plnkr.co/edit/1Fr83XHkY0bWd9IzOwuT?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview using Angular 5 and for my data structure. Any ideas on how to go ahead from this point would be appreciated. If any additional code is required, please let me know.

Answer 1

this is easy to do this. Only use Pipe and it would be deal.
First, in your display list (like Rightside.component.html), you did not create selections specify. Use the filter out de-select item. Last, you can set the selected and it would be display dynamic.
Rightside.component.html
<div>
<ul class="selection-list">
<li *ngFor="let item of STEP | unselect_filter">
<!-- I couldn't found your data list , so let STEP instead. -->
<button class="btn">
<i class="fa fa-close">
{{item}}
</i>
</button>
</li>
</ul>
</div>
filter.pipe.ts
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'unselect_filter'
})
export class MyFilterPipe implements PipeTransform {
transform(items: any[], filter: Object): any {
return items.filter(item => !item.select);
}
}

Answer 2

I think your object structure of **rightside.steps** is like this
[{
'selections':['xyz','abc'],
....
},
{
'selections':['shm','bsm'],
....
}];
by changing the object structure to the following
[{
'selections':[{
'isSelected': true,
'name':'xyz'
},{
'isSelected': true,
'name':'abc'
}],
....
},
{
'selections':[{
'isSelected': true,
'name':'shm'
},{
'isSelected': true,
'name':'bsm'
}],
....
}]
you can show/hide on the list
<div>
<ul class="selection-list">
<li *ngFor="let item of selections" [hidden]="!item.isSelected">
<button class="btn" (click)="removeItem(item)">
<i class="fa fa-close">
{{item}}
</i>
</button>
</li>
</ul>
</div>
export class RightSideComponent implements OnInit {
selections: string[];
#Input() selectionSubject: BehaviorSubject<string[]>;
constructor(private cd: ChangeDetectorRef) {}
#Output() unSelectItem= new EventEmitter<any>();
removeItem(item) {
item.isSelected = false;
this.unSelectItem.emit(item);
}
}
*ReportBuilderComponent html*
<div *ngFor="let step of rightside.steps">
<li *ngIf="!step.hidden">
<rightside-component (unSelectItem)="unSelectItem(item)" class="side-button" [selectionSubject]="step.selections">
</rightside-component>
</li>
</div>
export class ReportBuilderComponent implements OnInit {
// Your existing code
unSelectItem(item){
for(var step of rightside.steps){
for(var selectionItem of step.selections){
if(selectionItem === item){
selectionItem.isSelected = false;
}
}
}
}
}