Below is the component I am working with:
@Component({
selector: 'myselector',
providers: [ ],
directives: [ ChildComponent],
pipes: [ ],
template: '<myselector>This is {{testEmitter}}</myselector>'
})
export class ParentComponent{
@Input() testEmitter;
constructor(){
}
}
//Child Component details:
@Component({
selector: 'childselector',
templateUrl: '<childselector><input type="text" (focus)="beginTest()"/></childselector>',
pipes: [],
directives: []
})
export class ChildComponent{
@Output() testEmitter: EventEmitter = new EventEmitter();
startTest: boolean = false;
constructor() {
}
beginTest(){
this.startTest = !this.startTest;
this.testEmitter.emit(this.startTest);
}
}
I'm currently trying to find a way to display the value of the this.startTest variable from the ChildComponent to the ParentComponent. The {{testEmitter}} in my ParentComponent html isn't showing anything at the moment. I believe I'm on the right track and any help would be greatly appreciated!