Encountering an issue with Angular2 where I need to assign a unique identifier to my reusable component. Seeking assistance from the community.
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>
The 'ar-toggleable-account-section' in the above HTML is initially inactive, becoming active upon user interaction with the 'Edit' or 'Add' buttons.
Within account.component.ts:
protected inactive: boolean = true;
protected enableAction():boolean {
this.inactive = false;
return false;
}
In 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');
}
}
editable-account-string.component.html:
<input type="{{type}}"
placeholder="{{placeholder}}"
value="{{text}}"
[readonly]="text ? 'true': null" />
editable-account-string.component.ts:
import {
Component, Input, Output, ViewEncapsulation, EventEmitter
} from '@angular/core';
@Component({
selector: 'ar-account-editable-string',
templateUrl: './editable-account-string.component.html',
encapsulation: ViewEncapsulation.None,
})
export class EditableAccountStringComponent {
@Input() type:string = 'text';
@Input() placeholder:string = 'Enter some text...';
@Input() name:string = '';
@Input() text:string = '';
@Output() changed = new EventEmitter<string>();
}
Issue:
Struggling with keeping track of multiple 'Save' and 'Cancel' buttons appearing on screen due to a shared [inactive] attribute across components like 'lastName', 'password', etc. Need help implementing unique/dynamic values for each instance such as user.lastName, user.password, user.email, etc.
If you have a solution, your input would be greatly appreciated!