CODEWITHSUNDEEP
nativescriptangular2-nativescript
alvesdm
alvesdm

Reputation: 53

NativeScript - Passing content from Parent to Child component

I've been searching for this all over during the last 2 days so I decided to ask for help. Imagine we have a parent component called ParentComponent and we have also a child component called SomeComponent.

SomeComponent template would be:

import {Component} from "@angular/core";

@Component({
    selector: "SomeComponent",
    template: `
        <ActionBar title="TestApp">
        </ActionBar>
        <StackLayout style="margin-top:20;">
          <Label text="Somenthing on top"></Label>

            #CONTAINER CONTENT HERE#

          <Label text="Something in the bottom"></Label>
        </StackLayout>
    `,

})
export class SomeComponent {}

..and ParentComponent template would be:

import {Component} from "@angular/core";
import {SomeComponent} from "../some/where/...";

@Component({
    selector: "parent",
    template: `
        <SomeComponent>
            <Label text="Something here"></Label>
            <Label text="Something else here"></Label>
        </SomeComponent>
    `,

})
export class ParentComponent {}

Considering the aforementioned example, how can I get the content inside "< SomeComponent >" defined in my ParentComponent, to be displayed properly in the SomeComponent in the reserved "#CONTAINER CONTENT HERE#" area?

In theory it is as if I would end up with something like this:

<ActionBar title="TestApp">
</ActionBar>
<StackLayout style="margin-top:20;">
  <Label text="Somenthing on top"></Label>

    <Label text="Something here"></Label>
    <Label text="Something else here"></Label>

  <Label text="Something in the bottom"></Label>
</StackLayout>

It looks like something pretty simple that I used to do in react native, that I can't get to work on NS.

Thanks in advance.

Upvotes: 1

Views: 1630

Answers (1)

JoshSommer
JoshSommer

Reputation: 2618

You can use a ng-content tag to transclude the content from the parent container to the child. I believe all you need to add ng-content to your SomeContent component, which will then look like: 

import {Component} from "@angular/core";

@Component({
    selector: "SomeComponent",
    template: `
        <ActionBar title="TestApp">
        </ActionBar>
        <StackLayout style="margin-top:20;">
          <Label text="Somenthing on top"></Label>

            <ng-content></ng-content>

          <Label text="Something in the bottom"></Label>
        </StackLayout>
    `,

})
export class SomeComponent {}

You can read more about transclusion here https://toddmotto.com/transclusion-in-angular-2-with-ng-content

Also you can see a working example inside of the slides plugin I wrote https://github.com/TheOriginalJosh/nativescript-ngx-slides/blob/master/slides/app/slides/slides.component.ts#L40

Upvotes: 3

Related Questions