0

I am new to Angular 2 & Angular 4 and working on a web app, that should display two components in the viewport, which are overlapping. When the application loads for the first time (onLoad), it should display the first component. The user can interact with the component then. When the user interacts with the viewport, another component - with the same reserved space as the first component - should be displayed. I am looking for an NgIf-/Else-Condition for something like this: 

<component-1 *ngIf="windowOnload()" display component-1></component-1>

else display

<component-2></component-2>

I also need to implement some logic in the component, which details the condition; so the condition is:

When the window loads, display Component 1, else display Component 2. As I am new to Angular 2 & 4, any hints & code samples would be appreciated, thank you!

DWA
  • 530
  • 1
  • 5
  • 29
  • Possible duplicate of [How to use \*ngIf else in Angular 4?](https://stackoverflow.com/questions/43006550/how-to-use-ngif-else-in-angular-4) – Dalton Cézane Aug 01 '17 at 20:12
  • @Dalton: thank you for your hint; I read the mentionned post and specified my post a bit. I need some logic in the component, that displays the first component on load, the second component in the other case. Any hints would be appreciated! – DWA Aug 01 '17 at 20:17
  • Maybe this link https://medium.com/aviabird/ngif-else-lands-in-angular-2-0-a242940e54ff can help you. – Dalton Cézane Aug 01 '17 at 20:21

1 Answers1

3

Normally, you bootstrap your Angular application with the first component that you want to display. You would do that using routing. So you would route to your component-1.

Then I'm not clear on what triggers display of the second route, but you would normally then route to that second component on the desired action.

If you want an example of an Angular application with routing, I have one here: https://github.com/DeborahK/Angular2-GettingStarted

enter image description here

DeborahK
  • 57,520
  • 12
  • 104
  • 129