html code
<div class="container">
<div class="row">
<div class="col-xs-12">
<p>Add new Servers or blueprints!</p>
<label>Server Name</label>
<input type="text" class="form-control" [(ngModel)]="newServerName">
<label>Server Content</label>
<input type="text" class="form-control" [(ngModel)]="newServerContent">
<br>
<button
class="btn btn-primary"
(click)="onAddServer()">Add Server</button>
<button
class="btn btn-primary"
(click)="onAddBlueprint()">Add Server Blueprint</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<div
class="panel panel-default"
*ngFor="let element of serverElements">
<div class="panel-heading">{{ element.name }}</div>
<div class="panel-body">
<p>
<strong *ngIf="element.type === 'server'" style="color: red">{{ element.content }}</strong>
<em *ngIf="element.type === 'blueprint'">{{ element.content }}</em>
</p>
</div>
</div>
</div>
</div>
</div>
ts code
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
serverElements = [];
newServerName = '';
newServerContent = '';
onAddServer() {
this.serverElements.push({
type: 'server',
name: this.newServerName,
content: this.newServerContent
});
}
onAddBlueprint() {
this.serverElements.push({
type: 'blueprint',
name: this.newServerName,
content: this.newServerContent
});
}
}
errors in the terminal
app.component.html errors
- Property 'name' does not exist on type 'never'
- Property 'type' does not exist on type 'never'
- Property 'content' does not exist on type 'never'
- Property 'type' does not exist on type 'never'
- Property 'content' does not exist on type 'never'
app.component.ts errors
- Argument of type '{type: string; name: string; content: string; }' is not assignable to parameter of type 'never'
- Argument of type '{type: string; name: string; content: string; }' is not assignable to parameter of type 'never'