tony tony - 1 year ago 88
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>

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.


Rob Rob
Answer Source

Try using [hidden]. Something like this

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