<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>My Servers</h2>
<button class="btn btn-primary" (click)="OnAddServer()">Add Server</button>
<br><br>
<ul class="list-group">
<li
class="list-group-item "
*ngFor="let server of servers; let i = index"
(click)="onRemoveServer(i)">{{ server }}
</li>
</ul> </div>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testing-app';
servers;
OnAddServer() {
this.servers.push('Another Server Added');
}
onRemoveServer(id: number) {
const position = id + 1;
this.servers.splice(position, 1);
}
}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testing-app';
servers;
OnAddServer() {
this.servers.push('Another Server Added');
}
onRemoveServer(id: number) {
const position = id + 1;
this.servers.splice(position, 1);
}
}
servers= [];
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testing-app';
servers = [];
OnAddServer() {
this.servers.push('Another Server Added');
}
onRemoveServer(id: number) {
const position = id + 1;
this.servers.splice(position, 1);
}
}