How to show / hide child component

Question

I'm trying to create a single page site which will load 1.component.html by default. When user clicks on next button, it will load 2.component.html. Similarly if user is currently on 2.component.html and clicks back button then it will load 1.component.html. Routing is not required.

I just want to confirm, since you tag your question with both `angularjs` and `angular2`, what Angular version are you using to implement that? — Michael, Nov 11 '16 at 11:08
http://stackoverflow.com/questions/35578083/what-is-the-equivalent-of-ngshow-and-nghide-in-angular2/35578093#35578093 or for more advanced scenarios http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 — Günter Zöchbauer, Nov 11 '16 at 11:10

score 1 · Accepted Answer · answered Nov 11 '16 at 11:08

1

sounds like any tabs control.

basically you need a variable while every click changes it's state:

let status = 1;

function onclick1(){
   this.status = 1;
} 

function onclick2(){
    this.status = 2;
}

<button (click)="onclick1()">page1</button>
<button (click)="onclick2()">page2</button>
<div *ngIf="status==1">page1</div>
<div *ngIf="status==2">page2</div>

answered Nov 11 '16 at 11:08

Avi

1,924
3
17
31

I would also like the pages to be kept separated like 1.component.html,.... since I'm expecting lots of content, so it will offer better separation. – Rahul Dagli Nov 11 '16 at 11:16
you can put a component element inside those divs – Avi Nov 11 '16 at 11:40

score -3 · Answer 2 · edited Nov 11 '16 at 11:44

When firstpage loads it will redirect to component.html

//javascript code
<script type = "text/javascript">
window.onload = function() 
{
alert("ohk");
document.getElementById("fom_id").action = "1.component.html";}
</script>

'**************Below code to redirect on another page*******************
'**************Add this code on component.html file *******************

<script type="text/javascript">
//call this function on net button onclick event.
function validate()
{
alert("ohk");
var activeid = document.activeElement.id;
    if (activeid == "next")
    {
         document.getElementById("form_id").action = 2.component.html        document.getElementById("form_id").submit();
    }
}
</script>

//Add this same code for 2.component.html
//redirect it to 1.component.html

Where's the Angular 2 involved? – Rahul Dagli Nov 11 '16 at 12:17 — Rahul Dagli, Nov 11 '16 at 12:17

How to show / hide child component

2 Answers2