@Input() system: System;

  constructor(
    private route: ActivatedRoute,
    private baseService: BaseService,
    private location: Location
  ) { }


  ngOnInit(): void {
      this.getSystem();
  }

  getSystem(): void {
    const messagingSystemID = this.route.snapshot.paramMap.get('messagingSystemID');
    console.log("The ID is: ")
    console.log(messagingSystemID);
    this.baseService.getSystem(messagingSystemID)
      .subscribe(system => this.system = system);
  }

<h2>{{ system.systemID | uppercase }} Details</h2>
  <div>
    <label>Host:
      <input type="text" [(ngModel)]="system.host" placeholder="host"/>
    </label>
    <label>Port:
      <input type="number" [(ngModel)]="system.port" placeholder="port"/>
    </label>
    <label>RFC Dest:
      <input type="text" [(ngModel)]="system.rfcDest" placeholder="RfcDest"/>
    </label>
    <label>User:
      <input type="text" [(ngModel)]="system.userId" placeholder="password"/>
    </label>
    <label>Password:
      <input type="text" [(ngModel)]="system.password" placeholder="password"/>
    </label>
    <select name="Version" #version style="text-align:top">
            <option value=""></option>
            <option value="7.3">7.3</option>
            <option value="7.4">7.4</option>
            <option value="7.5">7.5</option>
    </select>
    <label>System:
      <input type="text" [(ngModel)]="system.systemID" placeholder="System ID"/>
    </label>
  </div>