Adding Dynamic Content inside

Question

 <ng-template #reuse>
  <div>Hello World</div>
</ng-template>

<ng-container [ngTemplateOutlet]="reuse"></ng-container>

<ng-container [ngTemplateOutlet]="reuse">
  <p>Good Morning</p>
</ng-container>

I would like to reuse the reuse template reference multiple times but with small modifications each time. In the above example, in the 2nd <ng-container> I would also like to add an additional <p> tag after the <div> tag (in the <ng-template>). Is it possible to achieve that without creating another template?

Chris Hamilton · Answer 1 · 2022-03-21T06:26:34.157

3

Yes, you can pass a context object to your template with [ngTemplateOutletContext] or the shorthand with *ngTemplateOutlet. Then you can render things based on that context.

<ng-template #reuse let-message="message">
  <div>Hello World</div>
  <p *ngIf="message">{{ message }}</p>
</ng-template>

<ng-container [ngTemplateOutlet]="reuse"></ng-container>

<ng-container
  [ngTemplateOutlet]="reuse"
  [ngTemplateOutletContext]="{ message: 'Good Morning' }"
></ng-container>

or

<ng-template #reuse let-message="message">
  <div>Hello World</div>
  <p *ngIf="message">{{ message }}</p>
</ng-template>

<ng-container *ngTemplateOutlet="reuse"></ng-container>

<ng-container
  *ngTemplateOutlet="reuse; context: { message: 'Good Morning' }"
></ng-container>

Doc reference: https://angular.io/api/common/NgTemplateOutlet

edited Mar 21 '22 at 06:26

answered Mar 21 '22 at 06:21

Chris Hamilton

9,252
1
9
26

I have multiple sections in a component with multiple lines of repeating html code. So i have grouped the common code into an for reuse. In certain sections I have a button or few div tags that dont appear in other sections. As you have mentioned I can use the context to differentiate between the sections and then add the non-common HTML code using an ng-if condition. – Ramya Balasubramanian Mar 21 '22 at 06:49
what if 'Good Morning' itself is a variable, which changes, based for example on the time of day. *ngTemplateOutlet="reuse; context: { message: timeOfDayGreeting }" >>> timeOfDayGreeting doesn't seem to work. – alex351 Mar 01 '23 at 10:26
1

@alex351 seems to work fine: https://stackblitz.com/edit/angular-a1mnmd?file=src/main.ts. Although if you want a UI rerender at a certain time of day you need to schedule it somehow. Angular isn't going to recheck all your UI conditions every second. – Chris Hamilton Mar 03 '23 at 20:26
@alex351 ie. you should be changing a component property with a `setTimeout` rather than using an if condition to calculate the message. – Chris Hamilton Mar 03 '23 at 20:33

score 0 · Answer 2 · answered Mar 21 '22 at 05:09

What is the end goal here? When or how happens this "each time"? ng-template is never generated in html code, it generates it's contents as html at run time. So adding new html lines to a template is not possible. It is a dynamic abstraction of Angular syntax.

However you could use template variables to pre-configure the template to add new lines when themplate bound variables change.

For example, you could add more template variables by adding let to ng-template. https://angular.io/guide/template-reference-variables#template-input-variable

<div *ngFor="let day of Weekdays"> 
<ng-container *ngIf = 
    "(day == 'Saturday' || day == 'Sunday'); else elseTemplate"> 
  <h1>{{day}} is a weekend</h1> 
</ng-container> 
<ng-template #elseTemplate> 
  <h1>{{day}} is not a weekend</h1> 
</ng-template> 
</div>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular 6';
  Weekdays: Array = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
  ];
}

Example: https://stackblitz.com/edit/hello-angular-6-ng-template-and-ng-container-exam-w2zn1j?file=src%2Fapp%2Fapp.component.html

The scenario is that there are multiple lines of html code repeating in multiple sections in component. So i have grouped the common code into an for reuse. In certain sections I have a button or few div tags that dont appear in other sections. I just required a solution how I could add these buttons or div elements in the existing ? — Ramya Balasubramanian, Mar 21 '22 at 06:47
Sounds like a perfect case to use template variable. Inside the `ng-template` use `*ngIf` to conditionally show few divs or buttons. `*ngIf` inside `ng-template` gets condition when to show those few divs or buttons via template variable `let-` which you have to supply. — Joosep Parts, Mar 21 '22 at 06:51
Thanks!! Then I suppose this should be the best way to implement this scenario — Ramya Balasubramanian, Mar 21 '22 at 07:33

Adding Dynamic Content inside

2 Answers2