Angular Error Fixing

Errors in Angular can be an effect of several causes.

Example 1:

component.html:

<div class="container">  
  <div class="row">  
 <div class="col-xs-12">  
   <h2>Servers::</h2>  
   <button class="btn btn-primary" (click)="AddServer()">Add</button>  
 <br><br>  
 
 <ul class="list-group">  
   <li  
   class="list-group-item "  
   *ngFor="let server of servers; let i = index"  
   (click)="RemoveServer(i)">{{ server }}  
   </li>  
 </ul> </div>  
 </div>

component.ts file:

import { Component } from '@angular/core';  
 
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'my-app';  
  servers;  
 
  AddServer() {  
    this.servers.push('New Server Added..');  
  }  
 
  RemoveServer(id: number) {  
    const position = id + 1;  
    this.servers.splice(position, 1);  
  }  
}

Output:

Explanation:

In the above example, we are demonstrating some specific types of errors. Here, an app is created and is named “my-app”. The created app has a server and a button on the page that can create other servers. On clicking on the “Add Servers” button, no server is added. The error type can be checked on the browser console. Here, it will display “push” property undefined.

Example 2:

component.ts:

import { Component } from '@angular/core';  
 
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'my-app';  
  servers = [];  
 
  AddServer() {  
    this.servers.push('New Server Added..');  
  }  
 
  RemoveServer(id: number) {  
    const position = id + 1;  
    this.servers.splice(position, 1);  
  }  
}

Output:

Explanation:

In the first example, we had declared servers but it was not initialized. In this example, we set the servers to be in an array format to hold the newly created servers, i.e, servers= []. Thus, the error is removed.