The error message “property ngif is not provided by any applicable directive on an embedded template” usually occurs when the “ngIf” directive is not imported or not recognized by Angular.
The “ngIf” directive is a structural directive in Angular which is used to conditionally render or remove an element from the DOM based on a certain condition. In order to use the “ngIf” directive, you need to ensure that you have imported the necessary Angular modules and have included the directive in your component’s template.
Here’s an example of how to use the “ngIf” directive in an Angular template:
<div *ngIf="displayMessage">
This element will only be displayed if the "displayMessage" property is truthy.
</div>
In this example, the “div” element will only be rendered if the “displayMessage” property in the component is truthy. If the property is falsy, the “div” element will not be included in the DOM.
Make sure that you have imported the “CommonModule” from “@angular/common” in your module file where you are using the “ngIf” directive. Also, ensure that you have the necessary syntax correct by using the asterisk (*) symbol before “ngIf”. This is the syntax for using structural directives in Angular.
If you have already imported the necessary modules and are still facing the issue, make sure that you haven’t made any typos or syntax errors in your template’s code. Check for any potential mistakes or missing quotation marks in the “ngIf” directive usage.