import {Component, Input, Output} from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{myvar}}</h1>
    <a href="#" (click)="updatemyvar()">This button will set myvar = 'tony'</a>
    <my-cmp [(myvar)]="myvar"></my-cmp>
`,
})
export class AppComponent  {
  @Input() @Output() myvar: string = "test";
  updatemyvar(){
    this.myvar = "gili";
  }
}

import {Component, Input, Output} from '@angular/core';
@Component({
    selector: 'my-cmp',
    template: `
        <h1>{{myvar}}</h1>
        <a href="#" (click)="updatemyvar()">This button will set myvar = 'tony'</a>
    `,
})
export class MyComponent  {
    @Input() @Output() myvar: string;

    updatemyvar(){
        this.myvar = "tony";
    }
}