Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Netanel Basal NetanelBasal

🎯
Focusing
View GitHub Profile
View empty-state-ex.html
<div *emptyCellState="value">
{{ value }}
</div>
View EmptyCellStateComponent.ts
@Component({
selector: 'empty-state-cell',
template: `<div class="empty-cell-state"></div>`,
})
export class EmptyCellStateComponent {}
View empty-state.v1.html
<div *ngIf="value === 0; else emptyStateTpl">
...
</div>
<ng-template #emptyStateTpl>
<div class="empty-cell-state"></div>
</ng-template>
View match-use.html
<div *matches="'xSmall'">
Only on xSmall
</div>
View fromMediaQuery.ts
import { fromEvent } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
function fromMediaQuery(breakpoint: string) {
const media = matchMedia(breakpoint);
return fromEvent(media, 'change').pipe(
map((e: MediaQueryListEvent) => e.matches),
startWith(media.matches)
)
View match-2.directive.ts
import { untilDestoryed, UntilDestroy } from '@ngneat/until-destroy';
const breakpoints = { ... };
@UntilDestroy()
@Directive({
selector: '[matches]'
})
export class MatchesDirective implements OnInit {
@Input() matches: keyof typeof breakpoints;
View match.directive.ts
const breakpoints = {
xSmall: '(max-width: 599px)',
small: '(min-width: 600px) and (max-width: 959px)',
medium: '(min-width: 960px) and (max-width: 1279px)',
large: '(min-width: 1280px) and (max-width: 1919px)',
xLarge: '(min-width: 1920px)',
};
@Directive({
selector: '[matches]'
View responsive-1.css
@media only screen and (max-width: 600px) {
.my-element {
display: none;
}
}
View hot-toast-2.example.ts
import { HotToastService } from '@ngneat/hot-toast';
@Component({})
export class AppComponent {
constructor(private toast: HotToastService,
private usersService: UsersService) {}
update() {
this.usersService.updateUser().pipe(
this.toast.observe({
View hot-toast.example.ts
import { HotToastService } from '@ngneat/hot-toast';
@Component({})
export class AppComponent {
constructor(private toast: HotToastService) {}
showToast() {
this.toast.show('Hello World!');
this.toast.success('Yeah!!');
this.toast.warning('Boo!');