CODEWITHSUNDEEP
angularangular-template
I Bowyer
I Bowyer

Reputation: 823

How can I pass data into a ng-Container

Sorry. I'm new to Angular :)

I'm trying to pass some data into a template

Here is the component that is calling the sharedComponent

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'sym-test',
  templateUrl: './test.component.html',
  styles: []
})
export class TestComponent implements OnInit {

    items = [
        '111',
        '222',
        '333'
    ];

  constructor() { }

    ngOnInit() {
  }
}

<p>test works!</p>

<sym-shared [items]="items">
    <ng-template LiTemplateDirective>
        <b>{{item}}</b>
    </ng-template>
</sym-shared>

import { Component, OnInit, Input, ContentChild, TemplateRef } from '@angular/core';
import { LiTemplateDirective } from '../li-template.directive';

@Component({
    selector: 'sym-shared',
    templateUrl: './shared.component.html',
})
export class SharedComponent implements OnInit {
    @Input() items: any[];

    @ContentChild(LiTemplateDirective, { static: true, read: TemplateRef })
    LiTemplate: TemplateRef<any>;

    constructor() { }

    ngOnInit() {
    }
}

<p>shared.component.html</p>

<ul>
    <li *ngFor="let item of items; index as i;">
        <ng-container *ngTemplateOutlet="LiTemplate || defaultTemplate;"></ng-container>
    </li>
</ul>

<ng-template #defaultTemplate>
    {{item}} - Default Template
</ng-template>

By Default I expect it to have a bullet list with the array item data and Default Template ...

The problem I have is how do I get the data into the ng-container?

I kinda want to do something like this in the shared.component.html but I dont think in do it that way:

<ng-container *ngTemplateOutlet="LiTemplate || defaultTemplate; context: {item: item}"></ng-container>

Upvotes: 2

Views: 5034

Answers (1)

raharshi puli
raharshi puli

Reputation: 326

use [ngTemplateOutletContext] in your ng-container and let-item on ng-template

     <ul>
        <li *ngFor="let item of items; index as i;">
            <ng-container [ngTemplateOutlet]="defaultTemplate" 
                 [ngTemplateOutletContext]="{item:item}"></ng-container>
        </li>
    </ul>

    <ng-template #defaultTemplate let-item='item'>
        {{item}} - Default Template
    </ng-template>

Upvotes: 7

Related Questions