I want to declare a variable which should be accessible from the template of the component, but not from other components. If I make it private
I will get an error with AoT compilation and if I make it public
you know what.
@Component({
selector: 'my-child',
template: `
<div>
<h2>Hello {{userName}}</h2>
</div>
`,
})
export class ChildComponent{
public userName = "Test Name"; //declared as public
}
@Component({
selector: 'my-parent',
template: `
<my-child #myChild></my-child>
<button (click)="buttonClicked"></button>
`,
})
export class ParentComponent{
ViewChild('myChild') myChild:ChildComponent;
public buttonClicked(){
//I don't want this.myChild.userName be accessible here
}
}
Is there any way to do so?