Nativescript pass parameter to nested component

Question

I'm doing an application with angular 5 and Nativescript. Well, in the app I have different pages (components), and all of them have the same bottom menu that is a single component. My question is how can I pass a parameter to the menu component, because on the menu component I need know witch is the current page, for example for set a class active to the current page item of the menu.

One page example:

<Page>
    <ActionBar title="" class="action-bar">
        <StackPanel orientation="horitzontal">
            <Label class="action-title" text="Canciones"></Label>
        </StackPanel>
    </ActionBar>
    <StackLayout class="page">
    <ListView [items]="filteredSongs" class="songs-listview" (itemTap)="songClick($event)" *ngIf="!isLoading">
        <ng-template let-item="item">
            <StackLayout>
                <Label [text]='item.SON_NAME'></Label>
            </StackLayout>
        </ng-template>
    </ListView>
    <StackLayout verticalAlignment="center" *ngIf="isLoading" class="loading-stack">
        <ActivityIndicator busy="{{ isLoading }}"></ActivityIndicator>
    </StackLayout>
</StackLayout>
<main-menu></main-menu> // THE MENU COMPONENT

David Weinberg · Accepted Answer · 2018-05-10 22:42:07Z

If I understand correctly, your page component is the parent and main-menu is a child. You want use input binding.

1) Change the main-menu tag to something like <main-menu [currentPage]="Canciones"></main-menu>. This will send an input to the main-menu component with the name currentPage and the value Canciones.

2) Next you need to change the MainMenuComponent to use the input that we have just bound.

a) add import { Input } from '@angular/core';

b) within the component class, declare the Input: @Input() currentPage: string;

c) use the currentPage variable as required.

Once you have master the basics of Input Binding, you can change the input type and more generically bind a reference to the current page component.

David

Collectives™ on Stack Overflow

Nativescript pass parameter to nested component

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related