CODEWITHSUNDEEP
angular
user3887366
user3887366

Reputation: 2594

How to pass a value to ng-container ngTemplateOutlet

I'm mastering angular directive and I'd like to pass a value to my component my code:

My component

`
@Component({
  selector: 'app-my-one',
  template: `
    <ng-container
      *ngTemplateOutlet="layoutTemplate; context: { name: name }"
    ></ng-container>
  `
})
export class MyOneComponent {
  @ContentChild(TemplateRef, { static: true })
  @Input()
  layoutTemplate: TemplateRef<any>;
}
`

and in app.component.html

`@Component({
  selector: 'app-root',
  template: `
    <app-my-one>
      <ng-template let-name="current">
        <span>Ahoj {{ name }}!</span>
      </ng-template>
    </app-my-one>
  `
})
export class AppComponent {
  current = 'Svet';
}`

But I can only see 'Ahoj'

Can you help me please?

Upvotes: 1

Views: 2452

Answers (1)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24414

try this way by pass the context object to the MyOneComponent

MyOneComponent template 

<ng-container
  *ngTemplateOutlet="layoutTemplate;context:myContext"
></ng-container>

App Component template 

<app-my-one [myContext]="current" >

  <ng-template let-name="name">
    <span>Ahoj {{ name }}!</span>
  </ng-template>

</app-my-one>

demo 🔥🔥

doc : NgTemplateOutlet

Upvotes: 1

Related Questions