Angular 10 NgTemplateOutlet Directive Last Updated : 03 Jun, 2021 Comments Improve Suggest changes Like Article Like Report In this article, we are going to see what is NgTemplateOutlet in Angular 10 and how to use it. The NgTemplateOutlet in Angular10 is used to insert an embedded view from a prepared TemplateRef. NgTemplateOutlet adds the reference element which is displayed on the page. Syntax: <li *NgTemplateOutlet='condition'></li> NgModule: Module used by NgTemplateOutlet is: CommonModule Selectors: [NgTemplateOutlet] Approach: Create an angular app to be used.There is no need for any import for the NgIf to be used.in app.component.html add NgTemplateOutlet Directive to the element with its reference.Serve the angular app using ng serve to see the output. Example 1: app.component.html <ng-container *ngTemplateOutlet="gfg"></ng-container> <ng-template #gfg> <h1>GeeksforGeeks</h1> <div> ngTemplateOutlet Directive </div> </ng-template> Output: Example 2: app.component.html <div *ngTemplateOutlet="gfg"></div> <ng-template #gfg> <h1> GeeksforGeeks </h1> <div> We can also use ngTemplateOutlet Directive with a div </div> </ng-template> Output: Reference: https://angular.io/api/common/NgTemplateOutlet Comment More infoAdvertise with us Next Article Angular 10 NgTemplateOutlet Directive T taran910 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Angular10 Similar Reads Angular 10 NgPlural Directive In this article, we are going to see what is NgPlural in Angular 10 and how to use it. The NgPlural in Angular10 is used to Add or remove DOM sub-trees based on a numeric value. Syntax: <li *NgPlural='condition'></li> NgModule: Module used by NgPlural is: CommonModule  Selectors: [NgPlu 1 min read AngularJS ng-bind-template Directive The ng-bind-template Directive in AngularJS is used to replace the content of an HTML element with the value of the given expression. It is used to bind more than one expression. It can have multiple {{ }} expressions. It is supported by all HTML elements. Syntax: The ng-bind-template Directive can 2 min read AngularJS ng-style Directive The ng-style Directive in AngularJS is used to apply custom CSS styles on an HTML element. The expression inside the ng-style directive must be an object. It is supported by all the HTML elements. Syntax: <element ng-style="expression"> Content ... </element>Parameter: expression: It rep 2 min read AngularJS ng-value Directive The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is not used for that specific element. It is supported by <input> 2 min read Angular 17 Structural Directives Structural directives in Angular 17 are a special type of directives that allow you to dynamically manipulate the DOM (Document Object Model) by adding, removing, or replacing elements based on certain conditions. These directives are prefixed with an asterisk (*) in the template syntax. In this art 5 min read Like