createComponent function example not work on 16.2.1 #51492

Activity

1. hiepxanh

   changed the title [-]createComponent function example not work[/-] [+]createComponent function example not work on 16.2.1[/+] on Aug 24, 2023
2. JeanMeche

   added

   area: docs

   on Aug 24, 2023
3. ngbot

   added this to the needsTriage milestone on Aug 24, 2023
4. JeanMeche

   added

   good first issueLabel noting a good first issue to be worked on by a community memberLabel noting a good first issue to be worked on by a community member

   on Aug 24, 2023
5. JeanMeche commented on Aug 24, 2023

   

   JeanMeche

   on Aug 24, 2023

   Last edited by JeanMeche

   Member

   More actions

   FYI it's missing a CD cycle.
   Calling componentRef.changeDetectorRef.detectChanges(); fixes your issue.
6. hiepxanh commented on Aug 24, 2023

   

   hiepxanh

   on Aug 24, 2023

   ContributorAuthor

   More actions

   @JeanMeche I just try to copy the document to make sure it follow tutorial. it's still not work sir, I updated as your suggest but it still the same

   

   
7. JeanMeche commented on Aug 24, 2023

   

   JeanMeche

   on Aug 24, 2023

   Last edited by JeanMeche

   Member

   More actions

   You're missing import 'zone.js'. (bootstrapApplication() throws silently an NG908)
8. hiepxanh commented on Aug 24, 2023

   

   hiepxanh

   on Aug 24, 2023

   ContributorAuthor

   More actions

   aw great, finally it start running. Thank you sir @JeanMeche
9. hiepxanh commented on Aug 24, 2023

   

   hiepxanh

   on Aug 24, 2023

   ContributorAuthor

   More actions

   I created PR to update this
10. hiepxanh commented on Aug 24, 2023

    

    hiepxanh

    on Aug 24, 2023

    ContributorAuthor

    More actions

    anyway, lazy is so bad, that repo is not complex enough. I think the current situation should look like this example repo:
    https://codesandbox.io/p/sandbox/relaxed-feather-27fv8y?file=/src/app/app.component.ts:63,6
    @JeanMeche

    refer from this issue: #51491
11. hiepxanh commented on Aug 24, 2023

    

    hiepxanh

    on Aug 24, 2023

    Last edited by hiepxanh

    ContributorAuthor

    More actions

    the dynamic 1 and dynamic 2 should jump to here, and I already use change detection to update it:

    
12. AndrewKushnir

    added

    state: has PR

    on Aug 26, 2023
13. hiepxanh commented on Aug 27, 2023

    

    hiepxanh

    on Aug 27, 2023

    Last edited by hiepxanh

    ContributorAuthor

    More actions

    @hiepxanh thanks for creating a repro. The problem is that you've used a binding value that would always be different for each change detection cycle, i.e. <div [innerHTML]="domSanitizer.bypassSecurityTrustHtml(content)"></div>. The bypassSecurityTrustHtml would return a new object each time it's invoked. You can try adding a new property to a class that would store a reference to the function call result and use it in a template instead. For example:

    @Component({
      standalone: true,
      selector: 'my-app',
      template: `<div [innerHTML]="sanitizedContent"></div>`,
    })
    export class AppComponent {
      domSanitizer = inject(DomSanitizer);
    
      content = `<h1> hello world 1</h1>  
        <dynamic1> </dynamic1> 
        <dynamic2> </dynamic2>  
        <h1> hello world 2</h1>`;
    
      // Store a reference to the computed result and use it in a template
      sanitizedContent = this.domSanitizer.bypassSecurityTrustHtml(this.content);
    

    Thank you.

    copy from #51491 (comment)

    dynamic1 can render successful with variable reference instead of function because it's new object everytime
    solve the issue I'm facing now.

    I will add an example about this in the document
14. hiepxanh commented on Aug 28, 2023

    

    hiepxanh

    on Aug 28, 2023

    ContributorAuthor

    More actions

    Hello sir, hope you are doing well. @AndrewKushnir I think this may be my last issue about this problem. I can have a perfect reproduction on our issue. I created on a new issue here: #51535
15. hiepxanh

    closed this as completedon Sep 2, 2023
16. angular-automatic-lock-bot commented on Oct 3, 2023

    

    angular-automatic-lock-botBot

    on Oct 3, 2023

    More actions

    This issue has been automatically locked due to inactivity.
    Please file a new issue if you are encountering a similar or related problem.

    Read more about our automatic conversation locking policy.

    _{This action has been performed automatically by a bot.}
17. angular-automatic-lock-bot

    locked and limited conversation to collaborators on Oct 3, 2023