CODEWITHSUNDEEP
htmlangulartypescriptdata-binding
alexyichu
alexyichu

Reputation: 3602

Angular 4: Updating the view

I'm very new to web-development in general, but I'm trying to build my website and came across the following problem I haven't be able to solve. I'm using angular 4 I have a div highlighting some code in my html file:

<div *ngIf="step1Updated">
  <prism-block 
    [code]="step1" 
    [language]="'python'">
  </prism-block>
  {{ step1 }}
</div>

In my typescript file:

step1Updated = false;
step1 = '';

onStep1(fileType: string) {
    this.step1 = this.step1service.returnCode(this.language, fileType);
    this.step1Updated = true;
}

Now on my html page, when I click from a selection of buttons executing onStep1() with different content, the content within my string interpolation changes, the {{ step1 }}, but the content within my prism-block doesn't. I can see that this is because we need two-way databinding but I've tried to put the [(ngModel)]="step1" two way data binding in the prism-block, div, etc... hoping that it would catch the update and then update the block, same as putting code in [(code)] but all resulted in errors..

any help or advice would be really appreciated!

Upvotes: 0

Views: 568

Answers (1)

Rahul Singh
Rahul Singh

Reputation: 341

here you need to load PrismComponent dynamically to update its view.refer my plunker(http://plnkr.co/edit/tEgnnS) code.


    onStep1(fileType: string) {
    const crf = this.cfR.resolveComponentFactory(PrismComponent);
    this.cc.clear();
    const cf = this.cc.createComponent(crf);
    (<PrismComponent>cf.instance).code = this.step1service.returnCode(this.language, fileType);
  }

Upvotes: 1

Related Questions