Cannot bind initial data to form controls

Trying to fill the data coming from my backend so it’s prepopulated

@Component({
	selector: 'app-my-profile',
	templateUrl: './my-profile.component.html',
	styleUrls: [ './my-profile.component.scss' ],
	// providers: [subformComponentProviders(MyProfileComponent)],
	// changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyProfileComponent extends NgxRootFormComponent<Customer> implements OnInit {
	constructor() {
		super();
	}

	@DataInput() 
	@Input('customer') dataInput: Required<Customer> | null | undefined;

	dataOutput: EventEmitter<CustomerCardForm>;

	ngOnInit(): void {
		console.log(this.dataInput); // always undefined
	}

	protected getFormControls(): Controls<Customer> {
		console.log(this.dataInput); // always undefined
		return {
			no: new FormControl({ value: 'Test', disabled: true }, Validators.required),
		}
	}
}

export interface Customer {
	no: string
}

Container

customer$: Observable<Customer>;
this.customer$ = this.customerService.get(); // returns Observable<Customer>

// Also try ed
customer$: Subject<CustomerCardForm> = new Subject();

this.customerService.get().subscribe((customer) => {
   this.customer$.next(customer);
});

Container html: <app-my-profile [customer]='customer$ | async'></app-my-profile>

[alemputes]

Sorry if I got off topic here, just wanted to answer your question. You can close it and thanks for all your help, really appreciate it 😃

[alemputes]

Wow, knew I screwed up somewhere hehe. I accidentally stumbled on this library and man I am glad, it’s soo freaking good, big thumbs up for your great work and thanks for your fast answers.

Now I just wish I had a great library like this to reduce the html boilerplate code as well, maybe you can point me in right direction? 😃 I am now using this method:

<form [formGroup]="formGroup">
        <app-input [controlName]="formControlNames.customerNo" label="Kundnummer"></app-input>
</form>

Input component:

@Component({
  selector: 'app-input',
  template: `
    <div class="p-grid">
      <div class="p-col-12 p-md-3">{{ label }}</div>
      <div class="p-col-12 p-md-6">
        <input [formControlName]="controlName" [type]="type" [placeholder]="placeholder" pInputText />
      </div>
	    <div class="p-col-12 p-md-3">
        <p-message
          severity="error"
          text="{{errorMessage}}"
          *ngIf="isInvalid">
        </p-message>
	    </div>
    </div>
  `,
  styleUrls: ['./input.component.css'],
  viewProviders: [
    {
      provide: ControlContainer,
      useFactory: (container: ControlContainer) => container,
      deps: [[new SkipSelf(), ControlContainer]]
    }
  ]
})
export class InputComponent implements OnInit {
  constructor() {}

  @Input() controlName: string;

  @Input() type = 'text';
  @Input() label: '';
  @Input() placeholder = '';
  
  @Input() errorMessage = '';
  @Input() isInvalid = false;
}