oop - Access property from component in provider in angular2 -

so i'm new oop , trying out ionic 2 angular 2 typescript. have input in home.html file coupled username in home.ts this:

export class homepage { public username: string; public newusername: string;  ... constructor(public users: userservice) { ... 

now want service (userservice.ts) take username input or home.ts , modify , store result newusername.

do have make constructor in service/provider in homepage instantiates new object of home though made object of in home.ts?

i imported homepage in userservices cant access newusername because didnt make object of it.

i don't know want take @ if you. (i'd use newusername in service itself)

note: has nothing ionic2 don't know ionic2.

working demo: https://plnkr.co/edit/03oxutzywrro8ptfdfla?p=preview

import { component } '@angular/core'; import {service} './service'; @component({   selector: 'my-app',   template: `   new user : {{s.newusername}}<br>   <input type="text" [(ngmodel)]="username">   <button (click)="click(username)">add user</button>   ` }) export class appcomponent {     constructor(private s:service){   }    click(username){     this.s.addusername(username);     console.log(this.s.newusername)   }  } 

service.ts

import {injectable} '@angular/core';  @injectable() export class service{    newusername:string;   addusername(str){     this.newusername=str;   } }