I was doing this task as a part of ann assignment of an online course portal.
Task 4In 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.