How to render elements using ng template in angular
Angular's <ng-template> element
defines a template that is not rendered by default.
Description :
With <ng-template>,
you can define template content that is only being rendered by Angular when
you, whether directly or indirectly, specifically instruct it to do so, allowing
you to have full control over how and when the content is displayed.
Note that if you wrap content inside an <ng-template> without
instructing Angular to render it, such content will not appear on a page. For
example, see the following HTML code, when handling it Angular won't render the
middle "Hip!" in the phrase "Hip! Hip! Hooray!" because of
the surrounding <ng-template>.
<p>Hip!</p><ng-template> <p>Hip!</p></ng-template><p>Hooray!</p> |
You must utilise ng-template combined with structural
derivatives like ngIf, ngFor, and ngSwitch in order to
render the items inside the template.
|
<div> <ng-template ngIf="true"> <p>How to render elements using ng template in angular -<b>CodeLSC</b></p> <hr /> <label for="fname">First Name</label><br /> <input type="text" id="fname" name="firstname" placeholder="Your name.." /><br /> <label for="country">Country</label><br /> <select id="country" name="country"> <option value="India">India</option> <option value="canada">Canada</option> <option value="usa">USA</option> </select> </ng-template> </div> |
Further information is available in the Usage Notes...
Comments
Post a Comment