Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Netanel Basal NetanelBasal

🎯
Focusing
View GitHub Profile
View cell-renderer.html
<resource-actions
[actions]="actions"
resourceActionsCell
></resource-actions>
View ResourceActionsCellDirective.ts
@Directive({
selector: '[resourceActionsCell]',
})
export class ResourceActionsCellDirective {
@HostListener('visible', ['$event'])
runSomeCode(visible: boolean) {
....
}
}
View action-menu-1.component.ts
@Component({
template: `
<svg-icon key="chevron" [tippy]="menu" (visible)="visible.next($event)">
</svg-icon>
<ng-template #menu>
... render the actions
</ng-template>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
View action-menu.component.ts
import { TippyModule } from '@ngneat/helipopper';
import { SvgIconsModule } from '@ngneat/svg-icon';
@Component({
template: `
<svg-icon key="chevron" [tippy]="menu" (visible)="onVisible($event)"></svg-icon>
<ng-template #menu>
... render the actions
</ng-template>
View switch-a1.component.html
<app-switch>
<span switchLabel>My label..</span>
<input
type="checkbox"
appTogglerRef
[formControl]="control"
/>
</app-switch>
<app-radio>
View checkbox-a2.component.ts
@Component({
selector: 'app-checkbox',
template: `
<-- this will be the native input element which will hide with CSS -->
<ng-content></ng-content>
<label [for]="id">
<-- add checkbox style here -->
<ng-content select="[checkboxLabel]"></ng-content>
</label>
View checkbox-a1.component.html
<app-checkbox>
<input
type="checkbox"
appTogglerRef
[formControl]="control"
/>
<span checkboxLabel>My label..</span>
</app-checkbox>
View toggler-a1.ts
@Directive({
selector: '[togglerRef]',
})
export class TogglerRefDirective {
constructor(private host: ElementRef) {}
setId(id: string) {
this.host.nativeElement.setAttribute('id', id);
}
}
View input-a4.component.html
<app-input>
<input inputRef [formControl]="control">
</app-input>
View input-a2.component.ts
@Component({
template: `...<button (click)="clear()">X</button>`
})
export class InputComponent {
ref: InputRefDirective;
@ContentChild(InputRefDirective) set inputRef(ref: InputRefDirective) {
this.ref = ref;
}