Imagine having a component with aliases for user data. This approach allows for shorter and cleaner variable names, making the code easier to read:
@Component({
selector: 'my-view',
templateUrl: './view.component.html',
styleUrls: ['./view.component.scss']
})
export class ViewComponent implements OnInit {
private plan: string;
private status: string;
private started: string;
private cycle: string;
constructor(private auth: Auth, private modal: Modal, private router: Router) {}
ngOnInit(): void {
this.plan = this.auth.userProfile.user_metadata.plan;
this.status = this.auth.userProfile.user_metadata.token.status;
this.started = this.auth.userProfile.user_metadata.token.epoch;
this.cycle = this.auth.userProfile.user_metadata.cycle;
if(this.plan === .... && this.cycle === ...) {
}
}
}
The convenience of these alias variables is compromised when user data updates. The values assigned during onInit do not automatically update, requiring a page refresh to reflect changes.
Is there a way to maintain the simplicity of alias variables like plan, status, started, cycle while ensuring they dynamically update based on the original data? Otherwise, readability may suffer from using longer variable names consistently.