Hassan Kashif Hassan Kashif - 2 months ago 15
Javascript Question

Passing unique identifier to angular 2 component?

I am facing an issue in Angular2. I want to pass unique identifier to my reusable component. Can someone help me.

account.html

<div class="container">
<!-- ACCOUNT INFO -->
<div class="row">
<!-- ACCOUNT FORM -->
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4">
<p>Name</p>
</div>
<div class="col-sm-6">
<ar-account-editable-string [type]="'text'" [name]="'name'" [placeholder]="'Enter the name'"
[text]="user?.username" (changed)="user.lastName = $event">
</ar-account-editable-string>
</div>
<div class="col-sm-2 action-type">
<div *ngIf="user.lastName">
<a href (click)="enableAction()">Edit</a>
</div>
<div *ngIf="!user.lastName">
<a href (click)="enableAction()">Add</a>
</div>
</div>
<div class="col-sm-12">
<ar-toggleable-account-section [inactive]="inactive" (activated)="$event">
</ar-toggleable-account-section>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Password</p>
</div>
<div class="col-sm-6">
<div *ngIf="oldPassword">
<ar-account-editable-string [type]="'password'" [name]="'oldPassword'" [placeholder]="'Current Password'" [text]="oldPassword" (changed)="oldPassword = $event">
</ar-account-editable-string>
</div>
<div *ngIf="newPassword">
<ar-account-editable-string [type]="'password'" [name]="'newPassword'" [placeholder]="'New Password'" (changed)="newPassword = $event">
</ar-account-editable-string>
<ar-account-editable-string [type]="'password'" [name]="'repeatNewPassword'" [placeholder]="'Repeat New Password'" (changed)="newPassword = $event">
</ar-account-editable-string>
</div>
</div>
<div class="col-sm-2 action-type">
<div *ngIf="user.password">
<a href (click)="enableAction()">Edit</a>
</div>
<div *ngIf="!user.password">
<a href (click)="enableAction()">Add</a>
</div>
</div>
<div class="col-sm-12">
<ar-toggleable-account-section [inactive]="inactive" (activated)="$event">
</ar-toggleable-account-section>
</div>
</div>


In above html ar-toggleable-account-section is inactive. It will become active when user either clicks 'Edit' or 'Add' button.

account.component.ts

protected inactive: boolean = true;
protected enableAction():boolean {
this.inactive = false;
return false;
}


toggleable-account.component.html

<div class="col-sm-offset-4" *ngIf="!inactive">
<a href (click)="save()">Save</a>
<a href (click)="cancel()">Cancel</a>
</div>


toggleable-account.component.ts

import {
Component, Input, Output, ViewChild, ViewEncapsulation, EventEmitter
} from '@angular/core';

@Component({
selector: 'ar-toggleable-account-section',
templateUrl: './toggleable-account.component.html',
encapsulation: ViewEncapsulation.None
})
export class ToggleableAccountButtonComponent {

/**
* set the inactive state of the component
* @type {boolean}
*/
@Input() inactive:boolean = true;

@Output() action = new EventEmitter<string>();

protected save():void {
this.action.emit('save');
}

protected cancel():void {
this.action.emit('cancel');
}

}


Issue:

Initially 'ar-toggleable-account-section' is inactive/hide. When I click 'Edit' or 'Add' button it becomes active but shows me multiple 'Save' 'Cancel' on the screen because same [inactive] is used in multiple places that are 'lastName', 'password' etc. So, when one [inactive]="inactive" become false all will show on the screen.
How can we pass unique/dynamic [inactive] value to the component for each user.lastName, user.password, user.email etc.?

Can someone give me a solution for this?

Answer

You could try this, pass what you Adding/Editing to the enable function and then in the components' input test whether that adding/editing property matches what you are adding/editing

account.component.ts

protected addEditProp = '';
protected enableAction(prop: String) {
    this.addEditProp = prop;
}
protected finishedAddEdit(result: String) {
    this.addEditProp = '';
}

toggleable-account-component.ts (just a variable name change)

@Output() accountResult = new EventEmitter<string>();

account.html (Notice the accountResult in the <ar-toggleable-account-section>)

<div class="col-sm-2 action-type">
    <div *ngIf="user.lastName">
        <a href (click)="enableAction('lastName')">Edit</a>
    </div>
    <div *ngIf="!user.lastName">
        <a href (click)="enableAction('lastName')">Add</a>
    </div>
</div>
<div class="col-md-12>
    <ar-toggleable-account-section [inactive]="addEditProp === 'lastName'" (accountResult)="finishedAddEdit($event)">
    </ar-toggleable-account-section>
</div>
<div class="col-sm-2 action-type">
    <div *ngIf="user.password">
        <a href (click)="enableAction('password')">Edit</a>
    </div>
    <div *ngIf="!user.password">
        <a href (click)="enableAction('password')">Add</a>
    </div>
</div>
<div class="col-sm-12">
    <ar-toggleable-account-section [inactive]="addEditProp === 'password'" (accountResult)="finishedAddEdit($event)">
    </ar-toggleable-account-section>
</div>

You will have to make sure that when you are done adding/editing and emit save or cancel to the parent component, it looks like the finishedAddEdit(result: String) function, you reset the addEditProp.

addEditProp = '';