I want to refactor old angular input to signal
I have a component:
<code> @Input() profileData: AdminAccountProfileResponse = { type: '' };
profile: ExtendedProfile = { type: '' };
ngOnChanges(changes: SimpleChanges): void {
if (changes['profileData'].currentValue) {
this.profile = this.profileData;
}
}
</code>
<code> @Input() profileData: AdminAccountProfileResponse = { type: '' };
profile: ExtendedProfile = { type: '' };
ngOnChanges(changes: SimpleChanges): void {
if (changes['profileData'].currentValue) {
this.profile = this.profileData;
}
}
</code>
@Input() profileData: AdminAccountProfileResponse = { type: '' };
profile: ExtendedProfile = { type: '' };
ngOnChanges(changes: SimpleChanges): void {
if (changes['profileData'].currentValue) {
this.profile = this.profileData;
}
}
and in html:
<code><h4>{{profile.verifiedMobile}}</h4>
</code>
<code><h4>{{profile.verifiedMobile}}</h4>
</code>
<h4>{{profile.verifiedMobile}}</h4>
I convert it like below but i am not sure it’s the best way or not:
<code> profileData = input<AdminAccountProfileResponse>({ type: '' });
profile = signal<ExtendedProfile>({ type: '' });
constructor() {
toObservable(this.profileData)
.pipe(takeUntilDestroyed())
.subscribe(data => {
if (data) this.profile.set(data);
});
}
</code>
<code> profileData = input<AdminAccountProfileResponse>({ type: '' });
profile = signal<ExtendedProfile>({ type: '' });
constructor() {
toObservable(this.profileData)
.pipe(takeUntilDestroyed())
.subscribe(data => {
if (data) this.profile.set(data);
});
}
</code>
profileData = input<AdminAccountProfileResponse>({ type: '' });
profile = signal<ExtendedProfile>({ type: '' });
constructor() {
toObservable(this.profileData)
.pipe(takeUntilDestroyed())
.subscribe(data => {
if (data) this.profile.set(data);
});
}
I also remove ngOnChanges
html:
<code><h4>{{profile().verifiedMobile}}</h4>
</code>
<code><h4>{{profile().verifiedMobile}}</h4>
</code>
<h4>{{profile().verifiedMobile}}</h4>