I'm new to Angular and currently developing a project with Angular 15. In my .ts component, I am fetching information from an API:
export class CustomPersonalSettingsComponent implements OnInit {
constructor(
private personalSettingsService: PersonalSettingService,
private config: ConfigStateService,
private route: ActivatedRoute
){}
ngOnInit() {
const currentUserId = this.config.getOne("currentUser").id;
this.personalSettingsService.get(currentUserId).subscribe((settings) => {
this.personalSettings = settings;
})
}
}
The received entity is stored in the this.personalSettings object which has the following structure:
export interface PersonalSettingDto extends EntityDto<string> {
userName?: string;
email?: string;
name?: string;
surname?: string;
phoneNumber?: string;
selectedTimeZone?: string;
timeZoneList: TimeZoneDto[];
}
Now, I want to display the received data in input fields in my HTML view. Here's the HTML template I've created for this purpose:
<div class="mb-3 ng-star-inserted">
<label for="username" class="form-label ng-star-inserted">User name</label>
<input ng-model="" class="form-control ng-pristine ng-valid ng-star-inserted ng-touched" id="username" autocomplete="off"
type="text">
</div>
<!-- Other input fields go here -->
<button class="btn btn-primary" (click)="send()">
<i class="fa fa-check mr-1"></i>
Send
</button>
This button triggers the send() method in the TypeScript file:
send(){ }
But how do I pass the data into this method? To achieve this goal of populating inputs with current data onInit function and sending data to the API, you might need to wrap everything in a form element. If you're unsure about how this works, feel free to ask for assistance.