Skip to content

Instantly share code, notes, and snippets.

@sulco
Created April 30, 2018 20:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save sulco/f1e69d0e453bd9c753639454af2bc099 to your computer and use it in GitHub Desktop.
Save sulco/f1e69d0e453bd9c753639454af2bc099 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);
}
}
@scottcrest
Copy link

don't we have to do something like this?
constructor() { super();}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment