Skip to content

Instantly share code, notes, and snippets.

@wKoza
Created Jan 19, 2017
Embed
What would you like to do?
import {Component, NgModule, Input, Output, EventEmitter, HostBinding, HostListener} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'compA',
template: `<h4>CompA: {{propA}}</h4>`
})
export abstract class CompA {
@Input() public propA;
@Output() eventClick = new EventEmitter();
@HostBinding('style.color') color = 'red';
abstract methodComp():void;
@HostListener('click')
onClick(e){
console.log(this.propA);
this.eventClick.emit(this.propA);
}
}
@Component({
selector: 'compB',
template: `
<h4>CompB: {{propA}}</h4>
`
})
export class CompB extends CompA {
@HostListener('click')
onClick(e) {
console.log(`${this.propA}`);
this.eventClick.emit(this.propA);
this.methodComp();
}
methodComp() {
console.log('methodComp');
}
}
@Component({
selector: 'my-app',
template: `
<div>
<compA (eventClick)="myValueChange($event)" propA="CompA"></compA>
<compB (eventClick)="myValueChange($event)" propA="CompB" ></compB>
</div>
`,
})
export class App {
myValueChange (event) {
console.log(event);
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App,CompA, CompB ],
bootstrap: [ App ]
})
export class AppModule {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment