I want to see only div-2 after the page load, then after I click div-2, I want to hide div-2 and show div-1.
<div class="div-1"><p>content 1</p></div>
<div class="div-2" (click)="on = true"><p>content 2</p></div>
-
Do you know about the directive ngIf?Dmitry Grinko– Dmitry Grinko2018-04-12 07:41:22 +00:00Commented Apr 12, 2018 at 7:41
-
yes , ill try it, but not workinguser8836452– user88364522018-04-12 07:48:44 +00:00Commented Apr 12, 2018 at 7:48
-
Provide your code with a directive, please.Dmitry Grinko– Dmitry Grinko2018-04-12 07:50:03 +00:00Commented Apr 12, 2018 at 7:50
Add a comment
|
1 Answer
In your component ts file you need to have a flag to show and hide the div as follows:
ts:
// set to true as we want to show div-2 at first
public showDiv2: boolean = true;
In html we will use the flag showDiv2 to hide and show both the div's:
html:
<div class="div-1" *ngIf="!showDiv2"><p>content 1</p></div>
<div class="div-2" *ngIf="showDiv2" (click)="showDiv2 = false"><p>content 2</p></div>
You can read more about ngIf here
