CODEWITHSUNDEEP
angularjsangular
tony
tony

Reputation: 315

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

Upvotes: 0

Views: 101

Answers (1)

Rob
Rob

Reputation: 12872

Try using [hidden]. Something like this

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

Upvotes: 1

Related Questions