We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angularjs 7 : trying to submit a form : getting errror Uncaught Error: Template parse errors:

Thread ID:

Created:

Updated:

Platform:

Replies:

142718 Feb 16,2019 06:15 AM UTC Feb 20,2019 06:39 AM UTC AngularJS 3
loading
Tags: General
Swati Dubey
Asked On February 16, 2019 06:15 AM UTC

Goal :
     I was doing this task as a part of ann assignment of an online course portal.
    Task 4

In this task you will use animation together with a progress spinner and the fact that the post() method will return the submitted feedback object as a return value to display briefly the submitted data to confirm the form submission to the user:

  • When the form is submitted, you should hide the form and display the progress spinner until the server responds confirming the update on the server side. See the next point below for further details.
  • Recall how in the lesson on saving data to the server, the PUT request returns an observable that we subscribe and then use the updated dish data returned to update the dish object in dishdetail.component.ts. Similarly when you do a post(), the feedback service must return the feedback object returned from the server after submission, by the submitFeedback() method. You can then subscribe to it within the contact.component.ts to obtain the returned feedback object. This confirms the successful submission of the feedback to the server.
  • After obtaining the confirmation from the server within the subscribe() method above, you should then display the information from the returned feedback object in the format as shown in the video for 5 seconds. Thereafter you should hide this and then again show the empty form to the user enabling them to submit the feedback again. Hint: Leverage the setTimeout() method for this purpose.
  • Use the expand animation that we have already used earlier to judiciously apply animation to the various stages of the form submission.
  What I am trying to do
    I have done some coding and have attached the .ts and .html files
What i am getting
  I am getting error as follows --
    compiler.js:20600 Uncaught Error: Template parse errors:
Assigning animation triggers via @prop="exp" attributes with an expression is invalid. Use property bindings (e.g. [@prop]="exp") or use an attribute without a value (e.g. @prop) instead. ("
    <mat-spinner></mat-spinner>
  </div>
  <div fxflex  *ngif="feedback && submitted" [ERROR ->]@expand]=" ">   
    <mat-list >
      <h3>Your Submission</h3>
"): ng:///AppModule/ContactComponent.html@94:45
Can't bind to 'ngif' since it isn't a known property of 'div'. ("
    <mat-spinner></mat-spinner>
  </div>
  <div fxflex  [ERROR ->]*ngif="feedback && submitted" @expand]=" ">   
    <mat-list >
      <h3>Your Submission</h3>
"): ng:///AppModule/ContactComponent.html@94:15
Property binding ngif not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("
    <mat-spinner></mat-spinner>
  </div>
  [ERROR ->]<div fxflex  *ngif="feedback && submitted" @expand]=" ">   
    <mat-list >
      <h3>Your Submission"): ng:///AppModule/ContactComponent.html@94:2
    at syntaxError (compiler.js:2426)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20600)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26146)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26133)
    at compiler.js:26076
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26076)
    at compiler.js:25986
    at Object.then (compiler.js:2417)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:25985)
What do I want
  I want to know why I am getting this error and how to fix it. I have debugged ithe code many times but wasn't able to find where i am going wrong so please tell me complete solution for this. i am new to angular.

Attachment: codefiles_2e400484.zip

Prince Oliver [Syncfusion]
Replied On February 18, 2019 11:42 AM UTC

Hi Swati, 
 
Thanks for contacting Syncfusion Support. 
 
We have validated the shared error report and the issue ‘Property binding ngif not used by any directive on an embedded template’ is due to misspelled structural directive is used in application and we suspect that the issue  ‘Assigning animation triggers via @prop="exp" attributes with an expression is invalid.’ is due to property binding syntax is not used properly in application. 
 
To resolve your error report, refer to the below syntax. 
 
<mat-list *ngIf="feedback &amp;&amp; submitted" [@expand]=""> 
 
 
To bind a property to a component, we need to initialize it with in a square bracket[]. 
 
We suggest you refer the below links for proper Property Binding and Structural directives syntax. 
 
 
 
We recommend you refer our Syncfusion Angular Components UG documentation and demo links. 
 
 
 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Prince 


Swati Dubey
Replied On February 19, 2019 07:19 AM UTC

Hi Swati, 
 
Thanks for contacting Syncfusion Support. 
 
We have validated the shared error report and the issue ‘Property binding ngif not used by any directive on an embedded template’ is due to misspelled structural directive is used in application and we suspect that the issue  ‘Assigning animation triggers via @prop="exp" attributes with an expression is invalid.’ is due to property binding syntax is not used properly in application. 
 
To resolve your error report, refer to the below syntax. 
 
<mat-list *ngIf="feedback &amp;&amp; submitted" [@expand]=""> 
 
 
To bind a property to a component, we need to initialize it with in a square bracket[]. 
 
We suggest you refer the below links for proper Property Binding and Structural directives syntax. 
 
 
 
We recommend you refer our Syncfusion Angular Components UG documentation and demo links. 
 
 
 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Prince 


Hi Prince,
    
    Thanks for your help  as i was able to resolve the error . i need your help again .
      I was trying to show the spinner before the page loads completely and then  hide the form and show the spinier while the form is being submitted (stage-2 of task 4) and Show the submitted feedback for 5 seconds only ( stage-3 of task 4) I have included the screenshots of the two stages of task 4 )

Task 4

In this task you will use animation together with a progress spinner and the fact that the post() method will return the submitted feedback object as a return value to display briefly the submitted data to confirm the form submission to the user:

  • When the form is submitted, you should hide the form and display the progress spinner until the server responds confirming the update on the server side. See the next point below for further details.
  • Recall how in the lesson on saving data to the server, the PUT request returns an observable that we subscribe and then use the updated dish data returned to update the dish object in dishdetail.component.ts. Similarly when you do a post(), the feedback service must return the feedback object returned from the server after submission, by the submitFeedback() method. You can then subscribe to it within the contact.component.ts to obtain the returned feedback object. This confirms the successful submission of the feedback to the server.
  • After obtaining the confirmation from the server within the subscribe() method above, you should then display the information from the returned feedback object in the format as shown in the video for 5 seconds. Thereafter you should hide this and then again show the empty form to the user enabling them to submit the feedback again. Hint: Leverage the setTimeout() method for this purpose.
  • Use the expand animation that we have already used earlier to judiciously apply animation to the various stages of the form submission.


 What I was getting?
On page load , the feedback form is not hidden and while the spinner is visible after that when I fill up the form fully and submit it , the form is still not hidden also the submitted feedback is shown below the form . The submitted feedback is not showing up as desired format of task 4 stage-3.
 How to complete the task 4 with correct format ?

I am attaching the updates code along with screenshots of stage 2 , stage 3 of task 4 and what I am getting right now as output.


 

Attachment: codefiles_924a55fd.zip

Preethi Nesakkan Gnanadurai [Syncfusion]
Replied On February 20, 2019 06:39 AM UTC

  
Hi Swati, 
   
We would like to inform you that we can provide in-depth technical assistance only for Syncfusion controls. For further assistance, please post your queries related to Syncfusion controls.  Thanks for your understanding.  
  
Regards, 
Preethi 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;