CODEWITHSUNDEEP
angular
Plompy
Plompy

Reputation: 379

show/ hide component angular more then once

I want to achieve the following: when user clicks "login" show login component and hide "register" component , when user clicks "register" show register component and hide "login" component.

My code works only once: when user clicks "login" show login component and hide "register", when user clicks "register" show register component and hide "login" component.

but if I click again on login it still shows register component.

here my code:

<button pButton label="register" (click)="registerOn= true">הרשמה</button>
<button pButton label="login" (click)="loginOn= true">כניסה</button>
<app-register *ngIf="registerOn"></app-register>
<app-login *ngIf="loginOn&&!registerOn"></app-login>

Upvotes: 2

Views: 37

Answers (2)

PushpikaWan
PushpikaWan

Reputation: 2525

There is an issue with your logic. registerOn and loginOn variables are not assigned any false value. You can change it like below by using only one varaible

<button pButton label="register" (click)="registerOn= true">הרשמה</button>
<button pButton label="login" (click)="registerOn= false">כניסה</button>
<app-register *ngIf="registerOn; else loginBlock"></app-register>
<ng-template #loginBlock><app-login> </app-login></ng-template>

Upvotes: 1

Kurt Hamilton
Kurt Hamilton

Reputation: 13515

You could use a single property to avoid having to manage multiple properties:

<button pButton label="register" (click)="activeComponent='register'">הרשמה</button>
<button pButton label="login" (click)="activeComponent='login'">כניסה</button>
<app-register *ngIf="activeComponent === 'register'"></app-register>
<app-login *ngIf="activeComponent === 'login'"></app-login>

component.ts

export class MyComponent {
  activeComponent = 'login';
}

Upvotes: 1

Related Questions