{"id":1946,"date":"2022-06-07T13:02:48","date_gmt":"2022-06-07T11:02:48","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1946"},"modified":"2022-06-08T17:51:44","modified_gmt":"2022-06-08T15:51:44","slug":"how-to-use-ngtemplateoutlet-in-angular","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/06\/07\/how-to-use-ngtemplateoutlet-in-angular\/","title":{"rendered":"How to Use ngTemplateOutlet in Angular"},"content":{"rendered":"\n

ngTemplateOutlet<\/span><\/em><\/code>  is a structural directive. It instantiates a template dynamically using a template reference and context object as parameters. We use it to insert a template (created by ngTemplate<\/code>) in various sections of our DOM.<\/p>\n\n\n\n

Defining a Template<\/h4>\n\n\n\n

Before we can use ngTemplateOutlet<\/span><\/em><\/code> we must first define a template using <ng-template><\/code>.<\/span> The template is the body of the <ng-template><\/code> element.<\/p>\n\n\n\n

<ng-template #myTemplate>\n  <div>Hello template<\/div>\n<\/ng-template>\n<\/code><\/pre>\n\n\n\n
To reference the template we name it via #<\/code> <\/span>syntax. By adding #myTemplate<\/span><\/em><\/code> to the element we can get a reference to the template using the name myTemplate<\/code><\/span><\/em> . The type of myTemplate<\/code> is TemplateRef<\/a><\/code>.<\/p>\n\n\n\n
Rendering a Template<\/h4>\n\n\n\n
The content of a <ng-Template><\/code> element is not rendered in the browser. To have the template body rendered we must now pass the template reference to a ngTemplateOutlet<\/code>.<\/p>\n\n\n\n
<!-- Define our template -->\n<ng-template #myTemplate> World! <\/ng-template>\n\nHello\n<!-- Render the template in this outlet -->\n<ng-container [ngTemplateOutlet]=\"myTemplate\"><\/ng-container>\n<\/code><\/pre>\n\n\n\n
Passing data to ngTemplateOutlet<\/h4>\n\n\n\n
We can also pass data to the template by using ngTemplateOutletContext<\/code>.<\/span><\/em><\/p>\n\n\n\n
<ng-container [ngTemplateOutlet]=\"myTemplate\" \n       [ngTemplateOutletContext] =\"{value:'1000'}\">\n<\/ng-container>  <\/code><\/pre>\n\n\n\n
Alternatively we can also use the following syntax:<\/p>\n\n\n\n
\n \n<ng-container *ngTemplateOutlet=\"myTemplate; context:{value:100}\">\n<\/ng-container> <\/code><\/pre>\n\n\n\n
Using the Context in the template<\/h4>\n\n\n\n
To access the context in our template we use let-*<\/code> syntax to define template input variables<\/a>.<\/p>\n\n\n\n
<ng-template #myTemplate let-params=\"value\">\n  <div>Hello template {{ params }} <\/div>\n<\/ng-template><\/code><\/pre>\n\n\n\n
Using $implicit<\/h4>\n\n\n\n
If you use the key $implicit<\/code> in the context object will set its value as default for all the local variables.<\/p>\n\n\n\n
For Example we have not assigned anything to the let-name<\/code> so it will take the value from the $implicit<\/code>, which is Guest<\/code>.<\/p>\n\n\n\n
ng-template let-name let-message=\"message\" #myTemplate>  \n  <p>Dear {{name}} , {{message}} <\/p>\n<\/ng-template>\n \n<ng-container [ngTemplateOutlet]=\"myTemplate\" \n              [ngTemplateOutletContext] =\"{$implicit:'Guest',message:'Welcome to our site'}\">\n<\/ng-container> <\/code><\/pre>\n\n\n\n
And in the following code, both name<\/code> & message<\/code> gets the value from the $implicit<\/code> i.e Guest<\/code><\/p>\n\n\n\n
<ng-template let-name let-message #musterTemplate>  \n  <p>Dear {{name}} , {{message}} <\/p>\n<\/ng-template>\n \n \n<ng-container [ngTemplateOutlet]=\"musterTemplate\" \n      [ngTemplateOutletContext] =\"{$implicit:'Guest',message:'Welcome to our site'}\">\n<\/ng-container> <\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
ngTemplateOutlet  is a structural directive. It instantiates a template dynamically using a template reference and context object as parameters. We use it to insert a template (created by ngTemplate) in various sections of our DOM. Defining a Template Before we can use ngTemplateOutlet we must first define a template using <ng-template>. The template is the body of the <ng-template> element. To reference […]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[558,469,556,557],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1946"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1946"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1946\/revisions"}],"predecessor-version":[{"id":1966,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1946\/revisions\/1966"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}