In Child1 component, I have used this.cdRef.detectChanges() . But when I add Child2 component on the same parent component. Child2 component implements AfterViewInit . It gives me exception
TypeError: Cannot read property 'ngDoCheck' of undefined in angular2.
Please suggest the solution.
child1:
export class MainFilterComponent implements AfterViewInit {
constructor(){
this.cdRef.detectChanges();
}
}
Child2
export class MainCompareComponent implements AfterViewInit {
constructor(){
}
}
export class MainFilterComponent implements AfterViewInit {
countries: Country[] = [];
filterToggled: boolean = false;
filter: Filter;
fromYears: Option[] = [];
holder: any;
institutions: Institution[] = [];
isFullWidth: boolean;
levels: Option[] = [];
programs: Program[] = [];
toYears: Option[] = [];
stretchBox: any;
@ViewChild('addBox') addBox: ElementRef;
@ViewChild('chooselist') list: ElementRef;
constructor(private translate: TranslateService, private filterService: FilterService, private zone: NgZone,
private activatedRoute: ActivatedRoute, private router: Router, private elementRef: ElementRef, private renderer: Renderer, private cdRef: ChangeDetectorRef) {
this.filter = filterService.getFilter();
this.getCountries();
this.getLevels();
this.getInstitutions();
this.getPrograms();
this.getYears();
this.updateFilterFromURL();
this.filterService.onFilterChanged$.subscribe(filter => this.onFilterChanged(filter));
}
ngAfterViewInit(): void {
jQuery.getScript('./app/components/filter/main-filter.js');
this.holder = this.list.nativeElement.parentNode.parentNode.parentNode;
this.stretchBox = this.holder.firstElementChild;
}
onFilterChanged(filter: Filter) {
this.filter = filter;
this.cdRef.detectChanges();
if (this.list.nativeElement.children.length > 0) {
this.renderer.setElementClass(this.list.nativeElement, 'select', true);
}
else if (this.list.nativeElement.children.length === 0) {
this.renderer.setElementClass(this.list.nativeElement, 'select', false);
}
this.refreshWidth();
}
refreshWidth() {
var items = this.list.nativeElement.children;
var listWidth = 0;
for (var i = 0; i < items.length; i++) {
listWidth += $(items[i]).outerWidth(true);
}
var newWidth;
if (!items.length || $(this.addBox.nativeElement).outerWidth(true) + (listWidth + ($(this.list.nativeElement).outerWidth(true) - $(this.list.nativeElement).width())) > $(this.holder).width() * 0.7) {
newWidth = '';
this.isFullWidth = true;
}
else {
this.isFullWidth = false;
newWidth = Math.floor((100 - (($(this.addBox.nativeElement).outerWidth(true) + (listWidth +
($(this.list.nativeElement).outerWidth(true)
- $(this.list.nativeElement).width()))) / $(this.holder).width() * 100)) - 1 /** 10*/) /*/ 10*/ + '%';
}
this.renderer.setElementStyle(this.stretchBox, 'width', newWidth);
}
