Angular signal set data in input signal change detect

Question

I want to refactor old angular input to signal

I have a component:

  @Input() profileData: AdminAccountProfileResponse = { type: '' };
  profile: ExtendedProfile = { type: '' };


 ngOnChanges(changes: SimpleChanges): void {
    if (changes['profileData'].currentValue) {
      this.profile = this.profileData;
    }
  }

and in html:

<h4>{{profile.verifiedMobile}}</h4>

I convert it like below but i am not sure it's the best way or not:

  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:

<h4>{{profile().verifiedMobile}}</h4>

Answer 1

As mentioned in the comments by Thomas Renger, the code will look like this.

  profileData = input<AdminAccountProfileResponse>({ type: '' });
  profile = computed(() => {
      const profileData = this.profileData();
      return profileData;
  });