Skip to content

Instantly share code, notes, and snippets.

View rainerhahnekamp's full-sized avatar

Rainer Hahnekamp rainerhahnekamp

View GitHub Profile
// Example showing property binding for ngComponentOutle
@Component({
template: `<ng-container
*ngComponentOutlet="component; inputs: context"
></ng-container>`,
standalone: true,
imports: [NgComponentOutlet],
})
export class AppComponent {
@rainerhahnekamp
rainerhahnekamp / angular-unit-testing-effect.ts
Last active September 7, 2023 12:44
Angular Unit Tests with effect()
import { Component, effect, signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
it('does not execute effects', () => {
TestBed.runInInjectionContext(() => {
let sum = 0;
const numbers = signal([1, 2, 3]);
effect(() => (sum = numbers().reduce((n1, n2) => n1 + n2)));
expect(sum).toBe(6); // 0
@rainerhahnekamp
rainerhahnekamp / selector with deep equal
Created October 21, 2022 11:03
NgRx selector with customized equal function
import { isEqual } from 'lodash';
import {
createFeatureSelector,
createSelector,
createSelectorFactory,
defaultMemoize,
} from '@ngrx/store';
import * as fromFlightBooking from './flight-booking.reducer';
export const selectFlightBookingState = createFeatureSelector<
import { test, expect } from '@playwright/test';
test.describe('initial test', () => {
test('holidays', async ({ page }) => {
await page.goto('https://genuine-narwhal-f0f8ad.netlify.app/');
await page.click('[data-testid=btn-holidays]');
await expect(page.locator('mat-drawer-content')).toContainText(
'Choose among our Holidays'
);
import { Component } from '@angular/core';
import { fakeAsync, flush, TestBed } from '@angular/core/testing';
import {
SchedulerEvent,
SchedulerModule,
} from '@progress/kendo-angular-scheduler';
const baseData: any[] = [
{
TaskID: 4,
const removed = createAction(
'[CUSTOMER] Removed',
props<{ customers: Customer[] }>()
);
// further actions (removed here for simplicity reasons)
export const CustomerActions = {
get,
export * from './lib/customer-data.module';
export { PublicCustomerActions as CustomerActions } from './lib/customer.actions';
export * from './lib/customer.selectors';
@Component({
selector: 'eternal-edit-customer',
template: ` <eternal-customer
*ngIf="customer$ | async as customer"
[customer]="customer"
(save)="this.submit($event)"
(remove)="this.remove($event)"
></eternal-customer>`,
})
export class EditCustomerComponent implements OnInit {
export class CustomerComponent {
formGroup = new FormGroup({});
@Input() customer: Customer | undefined;
@Output() save = new EventEmitter<Customer>();
@Output() remove = new EventEmitter<Customer>();
fields: FormlyFieldConfig[] = [
// form configuration
];
@Injectable({
providedIn: 'root',
})
export class DataGuard implements CanActivate {
constructor(private store: Store<CustomerAppState>) {}
canActivate(): Observable<boolean> {
this.store.dispatch(CustomerActions.get());
return this.store
.select(fromCustomer.isLoaded)