CODEWITHSUNDEEP
javascripttypescriptangularangular2-template
Bhushan Gadekar
Bhushan Gadekar

Reputation: 13805

How to reset ViewContainerRef in angular2 after change Detection?

So I am working on this app in which I have used ViewContainerRef along with dynamicComponentLoader like below:

generic.component.ts

export class GenericComponent implements OnInit, OnChanges{
    @ViewChild('target', { read: ViewContainerRef }) target;
    @Input('input-model') inputModel: any = {};
    constructor(private dcl: DynamicComponentLoader) { }
    ngAfterViewInit() {            
        this.dcl.loadNextToLocation(DemoComponent,this.target)
            .then(ref => {
                if (this.inputModel[this.objAttr] === undefined) {
                    ref.instance.inputModel = this.inputModel;
                } else {
                    ref.instance.inputModel[this.objAttr] = this.inputModel[this.objAttr];                        
                }
            });
            console.log('Generic Component :===== DemoComponent===== Loaded');
    }

   ngOnChanges(changes) {
       console.log('ngOnChanges - propertyName = ' + JSON.stringify(changes['inputModel'].currentValue));
       this.inputModel=changes['inputModel'].currentValue;                
   }
}

generic.html

<div #target></div>

So It renders the DemoComponentin target element correctly.

but when I am changing the inputModel then I want to reset the view of target element.

I tried onOnChanges to reset the inputModel , its getting changed correctly but the view is not getting updated for respective change.

So I want to know if is it possible to reset the view inside ngOnChanges after the inputModel is updated?

any inputs?

Upvotes: 1

Views: 2121

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657731

There is no connection between this.inputModel and ref.instance.inputModel. If one changes you need to copy it again.

For example like:

export class GenericComponent implements OnInit, OnChanges{
    componentRef:ComponentRef;

    @ViewChild('target', { read: ViewContainerRef }) target;
    @Input('input-model') inputModel: any = {};
    constructor(private dcl: DynamicComponentLoader) { }
    ngAfterViewInit() {            
        this.dcl.loadNextToLocation(DemoComponent,this.target)
            .then(ref => {
                this.componentRef = ref;
                this.updateModel();
            });
            console.log('Generic Component :===== DemoComponent===== Loaded');
    }

 
    updateModel() {
        if(!this.componentRef) return;

        if (this.inputModel[this.objAttr] === undefined) {
            this.componentRef.instance.inputModel = this.inputModel;
        } else {
            this.componentRef.instance.inputModel[this.objAttr] = this.inputModel[this.objAttr];                        
        }
    }

   ngOnChanges(changes) {
       console.log('ngOnChanges - propertyName = ' + JSON.stringify(changes['inputModel'].currentValue));
       this.inputModel=changes['inputModel'].currentValue;                
       this.updateModel();
   }
}

Upvotes: 1

Related Questions