Skip to content

Instantly share code, notes, and snippets.

@guillaumegarcia13
Created September 4, 2017 15:53
Show Gist options
  • Select an option

  • Save guillaumegarcia13/a00379681d95b0176e10fd3f794bd8bb to your computer and use it in GitHub Desktop.

Select an option

Save guillaumegarcia13/a00379681d95b0176e10fd3f794bd8bb to your computer and use it in GitHub Desktop.
Angular 4 ng-template & ng-container with parameters
<ng-template #followingpost let-author="author" let-age="age" let-text="text" let-badge="badge">
<div class="container-fluid">
<div class="card">
<div class="header">
<h4 class="title">{{ author }}</h4>
<p class="category">il y a {{ age }} jours</p>
</div>
<div class="content" [innerHTML]="text">
</div>
<div class="text-right">
<button class="btn btn-icon btn-simple"><i class="ti-comment"></i></button>
<button class="btn btn-icon btn-simple">
<i class="ti-heart"></i>
<span *ngIf="badge" class="badge">{{ badge }}</span>
</button>
<button class="btn btn-icon btn-simple"><i class="ti-share"></i></button>
</div>
</div>
</div>
</ng-template>
<ng-container *ngTemplateOutlet="followingpost;context:{author: 'Timothy', age: 2, badge: 18, text: 'Les Français qui payent plus de 2500 € d impôt peuvent bénéficier de cette loi : <a href=`http://bit.ly/2xxMicY`>http://bit.ly/2xxMicY</a>'}"></ng-container>
@boogie4eva

Copy link
Copy Markdown

Love it !. Saved my life didn't grab it earlier .

@jessycormier

Copy link
Copy Markdown

Is it possible to use the same ng-template for different containers that pass different contexts ?
also is it possible to manipulate the passed in content if its a property in the typescript component?

@dmushkov

dmushkov commented Mar 1, 2018

Copy link
Copy Markdown

You rock!

@andy-tdm

andy-tdm commented Apr 9, 2018

Copy link
Copy Markdown

Thanks man!! works perfect...

@nkanand4

Copy link
Copy Markdown

@jessycormier using $implicit context {$implicit: obj[field]}, you can use the same ng-template.

@AlyonaPavlova

Copy link
Copy Markdown

Oh my God! you saved me! thanks!

@davetheflashguy

Copy link
Copy Markdown

Thanks 3 years later this is still helping people

@m00zi

m00zi commented Jul 19, 2020

Copy link
Copy Markdown

Thanks, this is great example

@AnttiTanskanen

Copy link
Copy Markdown

Thanks fot this!

@HoangDinhHoi

HoangDinhHoi commented Jun 14, 2021 •

Copy link
Copy Markdown

You saved my life! Thanks you so much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment