CODEWITHSUNDEEP
javascripthtmlangular
Roka545
Roka545

Reputation: 3636

Pass variable from one html file to another

I'm creating an Angular 2 webpage - I originally had 1 HTML file that contained everything I needed for my web page's UI - for design reasons, I've taken out a part of the HTML and created a separate component for it (specifically a Tree view display). I've been able to reference the other HTML file (treeview) fine using its selector tree-selector in my original HTML like so:

<div *ngIf="showTree">
    <h1>Using treeview template.</h1>
    <tree-selector></tree-selector>
</div>

The code for tree-selector.html is (I'm using PrimeNG UI components):

<p-tree [value]="fileSystemTree" selectionMode="single"  (onNodeSelect)="nodeSelect($event)" (onNodeUnselect)="nodeUnselect($event)" (onNodeExpand)="nodeExpand($event)" [style]="{'max-height':'200px','overflow':'auto'}"></p-tree>

Before, when everything was in 1 file, it was easy to use the variable "fileSystemTree" to use for [value]. Now that I have two HTML files, I'm unsure of how to use fileSystemTree again in my main HTML and link it to [value] in tree-selector.html.

Upvotes: 0

Views: 168

Answers (1)

Dimanoid
Dimanoid

Reputation: 7289

Pass it to <tree-selector></tree-selector> as input parameter and then further to <p-tree...>

<div *ngIf="showTree">
    <h1>Using treeview template.</h1>
    <tree-selector [fileSystemTree]="fileSystemTree"></tree-selector>
</div>

in tree-selector component:

@Input() fileSystemTree: any;

Upvotes: 1

Related Questions