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

[Swati Dubey]

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]

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. 

 

https://help.syncfusion.com/angular/overview#property-binding 

 

https://angular.io/guide/structural-directives 

 

We recommend you refer our Syncfusion Angular Components UG documentation and demo links. 

 

https://help.syncfusion.com/angular/overview 

 

https://ej2.syncfusion.com/home/angular.html 

 

https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/ 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Prince 

[Swati Dubey]

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. 

 

https://help.syncfusion.com/angular/overview#property-binding 

 

https://angular.io/guide/structural-directives 

 

We recommend you refer our Syncfusion Angular Components UG documentation and demo links. 

 

https://help.syncfusion.com/angular/overview 

 

https://ej2.syncfusion.com/home/angular.html 

 

https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/ 

 

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]

  

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