Angular 4: Updating the view

Question

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!

you can't use ngModel outside of forms, show your prism-block component definition — Max Koretskyi
– Max Koretskyi, Commented Jun 25, 2017 at 5:57
I did not create the prism-block component, it was installed via npmjs.com/package/angular-prism, with the imports and declaration being in the app.module.ts. — alexyichu
– alexyichu, Commented Jun 25, 2017 at 6:01
there's something wrong with prism component, can you put up a plunker? — Max Koretskyi
– Max Koretskyi, Commented Jun 25, 2017 at 6:04
I've never used plunker, I just tried to but it works nothing like the angular I've been using.. My prism works, it highlights code from multiple languages fine, just if change the content of a string, it wont show the updated content. — alexyichu
– alexyichu, Commented Jun 25, 2017 at 6:16

Rahul Singh · Accepted Answer · 2017-06-25 08:40:09Z

1

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);
  }

answered Jun 25, 2017 at 8:40

Rahul Singh

3411 silver badge6 bronze badges

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

2 Comments

Rahul Singh Over a year ago

refer app template and its component, don't forget to add entryComponent in app module

alexyichu Over a year ago

Worked perfectly, repeating the last line to load the language dynamically too. Now I will study your code to fully understand it. Thank you so much!

Collectives™ on Stack Overflow

Angular 4: Updating the view

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related