We can make the code unreadable to some extent by means of minification and uglify, but since angular works completely on the client end, we can't completely protect the code from being exposed.

For such cases, we can simply create a Shared service which holds the value, which one component updates and other component binds in its view.

@Injectable()
export class MyService {
    myVal: string;
}

@Component()
export class Component1 {
    constructor(private myService: MyService) {}
    onUpdated(newVal) {
       this.myService.myVal = newVal;
    }
}

@Component() {
export class Component2 implements OnInit {
  myVal: string;
  constructor(private myService: MyService) {}
  ngOnInit() {
    this.myVal = this.myService.myVal;
  }
}

In Angular, components can communicate with each other by any of the following means:

• Input parameters
• Output parameters
• Service methods
• Subject and Observables