Angular Interpolation is not working properly?











up vote
2
down vote

favorite
2












I have one sample with interpolation. It shows drop-down values correctly when is use any one event like below:




sample: click me




code snippet:



Here i have added event (open)="onOpen()"



<ejs-dropdownlist 
(open)="onOpen()"
required id="ddlApp" name="ddlApp" [dataSource]='appDataSource' [allowFiltering]='true'
[itemTemplate]="itemTemplate" [valueTemplate]="valueTemplate" [(ngModel)]="dropdownlApp"
#ddlApp="ngModel" [placeholder]='ddlAppText' [fields]='fields'>



sample 2: click me




In this sample i would not add any event, in this case interolation is not working.



Code snippet:



<ejs-dropdownlist 
required id="ddlApp" name="ddlApp"
[dataSource]='appDataSource' [allowFiltering]='true'
[itemTemplate]="itemTemplate" [valueTemplate]="valueTemplate"
[(ngModel)]="dropdownlApp" #ddlApp="ngModel"
[placeholder]='ddlAppText' [fields]='fields'>









share|improve this question




























    up vote
    2
    down vote

    favorite
    2












    I have one sample with interpolation. It shows drop-down values correctly when is use any one event like below:




    sample: click me




    code snippet:



    Here i have added event (open)="onOpen()"



    <ejs-dropdownlist 
    (open)="onOpen()"
    required id="ddlApp" name="ddlApp" [dataSource]='appDataSource' [allowFiltering]='true'
    [itemTemplate]="itemTemplate" [valueTemplate]="valueTemplate" [(ngModel)]="dropdownlApp"
    #ddlApp="ngModel" [placeholder]='ddlAppText' [fields]='fields'>



    sample 2: click me




    In this sample i would not add any event, in this case interolation is not working.



    Code snippet:



    <ejs-dropdownlist 
    required id="ddlApp" name="ddlApp"
    [dataSource]='appDataSource' [allowFiltering]='true'
    [itemTemplate]="itemTemplate" [valueTemplate]="valueTemplate"
    [(ngModel)]="dropdownlApp" #ddlApp="ngModel"
    [placeholder]='ddlAppText' [fields]='fields'>









    share|improve this question


























      up vote
      2
      down vote

      favorite
      2









      up vote
      2
      down vote

      favorite
      2






      2





      I have one sample with interpolation. It shows drop-down values correctly when is use any one event like below:




      sample: click me




      code snippet:



      Here i have added event (open)="onOpen()"



      <ejs-dropdownlist 
      (open)="onOpen()"
      required id="ddlApp" name="ddlApp" [dataSource]='appDataSource' [allowFiltering]='true'
      [itemTemplate]="itemTemplate" [valueTemplate]="valueTemplate" [(ngModel)]="dropdownlApp"
      #ddlApp="ngModel" [placeholder]='ddlAppText' [fields]='fields'>



      sample 2: click me




      In this sample i would not add any event, in this case interolation is not working.



      Code snippet:



      <ejs-dropdownlist 
      required id="ddlApp" name="ddlApp"
      [dataSource]='appDataSource' [allowFiltering]='true'
      [itemTemplate]="itemTemplate" [valueTemplate]="valueTemplate"
      [(ngModel)]="dropdownlApp" #ddlApp="ngModel"
      [placeholder]='ddlAppText' [fields]='fields'>









      share|improve this question















      I have one sample with interpolation. It shows drop-down values correctly when is use any one event like below:




      sample: click me




      code snippet:



      Here i have added event (open)="onOpen()"



      <ejs-dropdownlist 
      (open)="onOpen()"
      required id="ddlApp" name="ddlApp" [dataSource]='appDataSource' [allowFiltering]='true'
      [itemTemplate]="itemTemplate" [valueTemplate]="valueTemplate" [(ngModel)]="dropdownlApp"
      #ddlApp="ngModel" [placeholder]='ddlAppText' [fields]='fields'>



      sample 2: click me




      In this sample i would not add any event, in this case interolation is not working.



      Code snippet:



      <ejs-dropdownlist 
      required id="ddlApp" name="ddlApp"
      [dataSource]='appDataSource' [allowFiltering]='true'
      [itemTemplate]="itemTemplate" [valueTemplate]="valueTemplate"
      [(ngModel)]="dropdownlApp" #ddlApp="ngModel"
      [placeholder]='ddlAppText' [fields]='fields'>






      javascript angular interpolation syncfusion ng-template






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 9 at 4:32









      yurzui

      91.8k10180204




      91.8k10180204










      asked Nov 8 at 6:30









      kumaresan_sd

      539




      539
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          4
          down vote



          accepted










          Just remove changeDetection: ChangeDetectionStrategy.OnPush form your @Component decorator your second sample will work



          You component decorator should read as



          @Component({
          selector: 'my-app',
          templateUrl: './app.component.html',
          styleUrls: [ './app.component.css' ]
          })


          Bind you object array in ngOnInit() it is the right way to bind and right time to bind the values - Thanks, Happy coding !!






          share|improve this answer





















          • Thanks for your reply.But my issue is when i use changeDetection,interpolation is not working
            – kumaresan_sd
            Nov 8 at 8:40












          • As per your code changeDetection: ChangeDetectionStrategy.OnPush will check only once when the component is instantiated, so that causes issue and your model is not updating after component is instantiated if you want changeDetection then use changeDetection: ChangeDetectionStrategy.Default this will check always when there is a change in your properties
            – Rahul
            Nov 8 at 8:59










          • Thanks for your reply..
            – kumaresan_sd
            Nov 8 at 9:40










          • If we remove ChangeDetectionStrategy.OnPush from component then that component will be checked on any changes in any component of app. If we're working on a performant application then we should keep OnPush. Adding (open)="0" event should be enough to update template when we open dropdown. Angular will automatically set DropDownListComponent to be checked so that the template attached to its view will be also checked.
            – yurzui
            Nov 9 at 4:29










          • @yurzui, i have same question. why i have to change onpush to default. if i use default it will trigger changedetection, if any changes occur but if we use onpush, it will trigger changedetection when value has been changed
            – kumaresan_sd
            Nov 9 at 5:06











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53202531%2fangular-interpolation-is-not-working-properly%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          4
          down vote



          accepted










          Just remove changeDetection: ChangeDetectionStrategy.OnPush form your @Component decorator your second sample will work



          You component decorator should read as



          @Component({
          selector: 'my-app',
          templateUrl: './app.component.html',
          styleUrls: [ './app.component.css' ]
          })


          Bind you object array in ngOnInit() it is the right way to bind and right time to bind the values - Thanks, Happy coding !!






          share|improve this answer





















          • Thanks for your reply.But my issue is when i use changeDetection,interpolation is not working
            – kumaresan_sd
            Nov 8 at 8:40












          • As per your code changeDetection: ChangeDetectionStrategy.OnPush will check only once when the component is instantiated, so that causes issue and your model is not updating after component is instantiated if you want changeDetection then use changeDetection: ChangeDetectionStrategy.Default this will check always when there is a change in your properties
            – Rahul
            Nov 8 at 8:59










          • Thanks for your reply..
            – kumaresan_sd
            Nov 8 at 9:40










          • If we remove ChangeDetectionStrategy.OnPush from component then that component will be checked on any changes in any component of app. If we're working on a performant application then we should keep OnPush. Adding (open)="0" event should be enough to update template when we open dropdown. Angular will automatically set DropDownListComponent to be checked so that the template attached to its view will be also checked.
            – yurzui
            Nov 9 at 4:29










          • @yurzui, i have same question. why i have to change onpush to default. if i use default it will trigger changedetection, if any changes occur but if we use onpush, it will trigger changedetection when value has been changed
            – kumaresan_sd
            Nov 9 at 5:06















          up vote
          4
          down vote



          accepted










          Just remove changeDetection: ChangeDetectionStrategy.OnPush form your @Component decorator your second sample will work



          You component decorator should read as



          @Component({
          selector: 'my-app',
          templateUrl: './app.component.html',
          styleUrls: [ './app.component.css' ]
          })


          Bind you object array in ngOnInit() it is the right way to bind and right time to bind the values - Thanks, Happy coding !!






          share|improve this answer





















          • Thanks for your reply.But my issue is when i use changeDetection,interpolation is not working
            – kumaresan_sd
            Nov 8 at 8:40












          • As per your code changeDetection: ChangeDetectionStrategy.OnPush will check only once when the component is instantiated, so that causes issue and your model is not updating after component is instantiated if you want changeDetection then use changeDetection: ChangeDetectionStrategy.Default this will check always when there is a change in your properties
            – Rahul
            Nov 8 at 8:59










          • Thanks for your reply..
            – kumaresan_sd
            Nov 8 at 9:40










          • If we remove ChangeDetectionStrategy.OnPush from component then that component will be checked on any changes in any component of app. If we're working on a performant application then we should keep OnPush. Adding (open)="0" event should be enough to update template when we open dropdown. Angular will automatically set DropDownListComponent to be checked so that the template attached to its view will be also checked.
            – yurzui
            Nov 9 at 4:29










          • @yurzui, i have same question. why i have to change onpush to default. if i use default it will trigger changedetection, if any changes occur but if we use onpush, it will trigger changedetection when value has been changed
            – kumaresan_sd
            Nov 9 at 5:06













          up vote
          4
          down vote



          accepted







          up vote
          4
          down vote



          accepted






          Just remove changeDetection: ChangeDetectionStrategy.OnPush form your @Component decorator your second sample will work



          You component decorator should read as



          @Component({
          selector: 'my-app',
          templateUrl: './app.component.html',
          styleUrls: [ './app.component.css' ]
          })


          Bind you object array in ngOnInit() it is the right way to bind and right time to bind the values - Thanks, Happy coding !!






          share|improve this answer












          Just remove changeDetection: ChangeDetectionStrategy.OnPush form your @Component decorator your second sample will work



          You component decorator should read as



          @Component({
          selector: 'my-app',
          templateUrl: './app.component.html',
          styleUrls: [ './app.component.css' ]
          })


          Bind you object array in ngOnInit() it is the right way to bind and right time to bind the values - Thanks, Happy coding !!







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 8 at 7:20









          Rahul

          9211314




          9211314












          • Thanks for your reply.But my issue is when i use changeDetection,interpolation is not working
            – kumaresan_sd
            Nov 8 at 8:40












          • As per your code changeDetection: ChangeDetectionStrategy.OnPush will check only once when the component is instantiated, so that causes issue and your model is not updating after component is instantiated if you want changeDetection then use changeDetection: ChangeDetectionStrategy.Default this will check always when there is a change in your properties
            – Rahul
            Nov 8 at 8:59










          • Thanks for your reply..
            – kumaresan_sd
            Nov 8 at 9:40










          • If we remove ChangeDetectionStrategy.OnPush from component then that component will be checked on any changes in any component of app. If we're working on a performant application then we should keep OnPush. Adding (open)="0" event should be enough to update template when we open dropdown. Angular will automatically set DropDownListComponent to be checked so that the template attached to its view will be also checked.
            – yurzui
            Nov 9 at 4:29










          • @yurzui, i have same question. why i have to change onpush to default. if i use default it will trigger changedetection, if any changes occur but if we use onpush, it will trigger changedetection when value has been changed
            – kumaresan_sd
            Nov 9 at 5:06


















          • Thanks for your reply.But my issue is when i use changeDetection,interpolation is not working
            – kumaresan_sd
            Nov 8 at 8:40












          • As per your code changeDetection: ChangeDetectionStrategy.OnPush will check only once when the component is instantiated, so that causes issue and your model is not updating after component is instantiated if you want changeDetection then use changeDetection: ChangeDetectionStrategy.Default this will check always when there is a change in your properties
            – Rahul
            Nov 8 at 8:59










          • Thanks for your reply..
            – kumaresan_sd
            Nov 8 at 9:40










          • If we remove ChangeDetectionStrategy.OnPush from component then that component will be checked on any changes in any component of app. If we're working on a performant application then we should keep OnPush. Adding (open)="0" event should be enough to update template when we open dropdown. Angular will automatically set DropDownListComponent to be checked so that the template attached to its view will be also checked.
            – yurzui
            Nov 9 at 4:29










          • @yurzui, i have same question. why i have to change onpush to default. if i use default it will trigger changedetection, if any changes occur but if we use onpush, it will trigger changedetection when value has been changed
            – kumaresan_sd
            Nov 9 at 5:06
















          Thanks for your reply.But my issue is when i use changeDetection,interpolation is not working
          – kumaresan_sd
          Nov 8 at 8:40






          Thanks for your reply.But my issue is when i use changeDetection,interpolation is not working
          – kumaresan_sd
          Nov 8 at 8:40














          As per your code changeDetection: ChangeDetectionStrategy.OnPush will check only once when the component is instantiated, so that causes issue and your model is not updating after component is instantiated if you want changeDetection then use changeDetection: ChangeDetectionStrategy.Default this will check always when there is a change in your properties
          – Rahul
          Nov 8 at 8:59




          As per your code changeDetection: ChangeDetectionStrategy.OnPush will check only once when the component is instantiated, so that causes issue and your model is not updating after component is instantiated if you want changeDetection then use changeDetection: ChangeDetectionStrategy.Default this will check always when there is a change in your properties
          – Rahul
          Nov 8 at 8:59












          Thanks for your reply..
          – kumaresan_sd
          Nov 8 at 9:40




          Thanks for your reply..
          – kumaresan_sd
          Nov 8 at 9:40












          If we remove ChangeDetectionStrategy.OnPush from component then that component will be checked on any changes in any component of app. If we're working on a performant application then we should keep OnPush. Adding (open)="0" event should be enough to update template when we open dropdown. Angular will automatically set DropDownListComponent to be checked so that the template attached to its view will be also checked.
          – yurzui
          Nov 9 at 4:29




          If we remove ChangeDetectionStrategy.OnPush from component then that component will be checked on any changes in any component of app. If we're working on a performant application then we should keep OnPush. Adding (open)="0" event should be enough to update template when we open dropdown. Angular will automatically set DropDownListComponent to be checked so that the template attached to its view will be also checked.
          – yurzui
          Nov 9 at 4:29












          @yurzui, i have same question. why i have to change onpush to default. if i use default it will trigger changedetection, if any changes occur but if we use onpush, it will trigger changedetection when value has been changed
          – kumaresan_sd
          Nov 9 at 5:06




          @yurzui, i have same question. why i have to change onpush to default. if i use default it will trigger changedetection, if any changes occur but if we use onpush, it will trigger changedetection when value has been changed
          – kumaresan_sd
          Nov 9 at 5:06


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53202531%2fangular-interpolation-is-not-working-properly%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          這個網誌中的熱門文章

          Xamarin.form Move up view when keyboard appear

          Post-Redirect-Get with Spring WebFlux and Thymeleaf

          Anylogic : not able to use stopDelay()