tony tony - 5 months ago 30
AngularJS Question

Angular 2 One page example

Trying to build a one page app, it will have a search div then a results div.

export class AppComponent implements OnInit{

// Div visability.
searchVisible = true;
resultsVisible = false;
}


<div class="container">
<search *ngIf="searchVisible == true"></search>
<results [resultsVisible]="resultsVisible" *ngIf="resultsVisible == true"></results>
</div>


Once results component get data back from the search form, it will switch resultsVisible to true so I am passing resultsVisible from AppComponent to ResultsComponent.

However this is not working atm.

Im not sure if that hows other people do it but I am still having trouble to hide/show the divs correctly.

Can someone please show me an example of how a "one page" app works in Angular 2 with hiding/showing elements.

Thanks

Rob Rob
Answer

Try using [hidden]. Something like this

<div class="container">
    <search [hidden]="!searchVisible"></search>
    <results [hidden]="!resultsVisible"></results>
</div>
Comments