Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save hazdik/ee9c89b6411e8c6dd18990a2bfe2840e to your computer and use it in GitHub Desktop.
Save hazdik/ee9c89b6411e8c6dd18990a2bfe2840e to your computer and use it in GitHub Desktop.
Simple one-file Angular component with `ViewEncapsulation.Native`
import { Input, Component, ViewEncapsulation, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'custom-button',
template: `<button (click)="handleClick()">{{label}}</button>`,
styles: [`
button {
border: solid 3px;
padding: 8px 10px;
background: #bada55;
font-size: 20px;
}
`],
encapsulation: ViewEncapsulation.Native
})
export class ButtonComponent {
@Input() label = 'default label';
@Output() action = new EventEmitter<number>();
private clicksCt = 0;
handleClick() {
this.clicksCt++;
this.action.emit(this.clicksCt);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment