When I modify the Array of servers from outside the class declaration, the View/HTML component does not update accordingly. However, when I perform the same modification from inside the class, it works fine. Both functions successfully update the servers Array, but only the inner function triggers the DOM update. Please refer to the following code ->
export class ContentComponent implements OnInit {
cdr: ChangeDetectorRef;
@Input() servers: Server[] = [];
constructor( cdr: ChangeDetectorRef) {
this.cdr = cdr;
}
addServerToServerListInsideClass() { //This is the working test function
this.servers.push(new Server("test", "test"));
}
ngOnInit(): void {
}
}
export function addServerToServerList(contentComponent: ContentComponent, name: string, content: string) {
const newServer = new Server(name, content);
contentComponent.servers.push(newServer);
contentComponent.servers.forEach(element => {
console.log(element)
});
contentComponent.cdr.markForCheck();
}
Here is the template with the *ngFor loop->
<button (click)="addServerToServerListInsideClass()">My Button</button> <!-- testing inside a function-->
<div *ngFor="let server of servers | keyvalue">
<app-content-item [key]="server.key" [value]="server.value"></app-content-item>
</div>
The exported function defined outside the class declaration is called in another .ts file. Please refer to the code below ->
export class EingabeComponent implements OnInit {
serverName!: string;
serverContent!: string;
constructor(public contentComponent: ContentComponent) {
}
onUpdateServerName(event: Event) {
const target = event.target as HTMLInputElement;
this.serverName = target.value;
}
onUpdateServerContent(event: Event) {
const target = event.target as HTMLInputElement;
this.serverContent = target.value;
}
onCreateServer() {
addServerToServerList(this.contentComponent, this.serverName, this.serverContent);
}
ngOnInit(): void {
}
}
The onCreateServer() function is invoked within the following template:
<div class="row">
<div class="col-md-6">
<h1>Add new Server or blueprints</h1>
<label for="name">Server Name</label>
<input
type="text" name="name"
(input)="onUpdateServerName($event)">
<label for="content">Server Content</label>
<input
type="text" name="content"
(input)="onUpdateServerContent($event)">
<button class="btn btn-primary"
(click)="onCreateServer()">Add Server
Add Server </button>
</div>
</div>
Thank you for your assistance! :)