Is it possible to use a component inside another component with some modification

Question

I have a home component and inside the Home component I am using the login component.

There is another component named My Account and I have to use the login component in my account page as well. But I cannot use this login component inside the my account component without adding 'current' class <div id="tab-3" class="log-tab-content current"> because its a popup and adding the current class makes the popup to show so it will be hidden if I dont add current class. In the home page you have to click to view the login popup (component), thats how it gets activated. How could I reuse the component in this case ?

<form [formGroup]="LoginForm" (ngSubmit)="onSubmit()">
    <div id="tab-3" class="log-tab-content">
      <div class="login-form">
        <div class="login-mid">            
              </div>
        <input type="text"/>
        </div>
        <button type="submit" class="log-button log-button1">Reset Password</button>
      </div>
    </div>
</form>

Answer 1

Yes, @Input() properties are meant for that. You can change the behavior of component based on the input values.

1. Set current class dynamically using ngClass based on some input property sent by parent.
2. Send input to login comp from my-account like [showPopup]="true".

Code:

login comp ts

class LoginComponent{
  @Input() showPopup: boolean = false;
}

login.html

<form [formGroup]="LoginForm" (ngSubmit)="onSubmit()">
    <div id="tab-3" class="log-tab-content" [ngClass]="{'current':showPopup === true}">
      <div class="login-form">
        <div class="login-mid">            
              </div>
        <input type="text"/>
        </div>
        <button type="submit" class="log-button log-button1">Reset Password</button>
      </div>
    </div>
</form>

my-account

<login [showPopup]="true"></login>