Muhammad Ahsan Ayaz AhsanAyaz

Author of Angular Cookbook (2x) | Speaker | Educator | Google Developers Expert (GDE) in Angular | Software Architect at Scania Group

AhsanAyaz / gist:aec1096a3850e9a87bd70ae91230496a

Created November 12, 2024 08:40

ahsanayaz-vscode-extensions.txt

	adam-bender.commit-message-editor
	adpyke.codesnap
	ahmadalli.vscode-nginx-conf
	ahmadawais.shades-of-purple
	alexkrechik.cucumberautocomplete
	andrew-codes.cypress-snippets
	angular.ng-template
	anysphere.pyright
	astro-build.astro-vscode
	atian25.copy-syntax

AhsanAyaz / Spirograph.html

Created July 7, 2024 21:04

A simple web app showing how to create a spirograph with just html and javascript using SVG and line elements

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Spirograph</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link
	href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"

AhsanAyaz / index.html

Created October 19, 2023 11:54

ReaveaJS Video Full Screen

	<!-- Add this before your HTML's closing body tag -->
	<script>
	Reveal.initialize({
	controls: true,
	progress: true,
	history: true,
	center: true,

	plugins: [
	RevealMarkdown,

AhsanAyaz / user.service.spec-with-mock-users.ts

Created July 19, 2023 07:58

Snippet for ng-test-http-resp including mock users

	it('should return expected user data (HttpClient called once)', () => {
	const mockUsers: User[] = [
	{
	id: 1,
	name: 'User A',
	email: '[email protected]',
	username: 'userA',
	address: {
	street: 'sample street 1',
	suite: '123 ABC',

AhsanAyaz / counter.component.spec.ts

Last active June 26, 2023 01:58

Angular Cookbook ng-jest-services-stubs tests for CounterService

	// replace the tests below
	it('should call the CounterService.getFromStorage method on component init', () => {
	jest.spyOn(CounterServiceMock, 'getFromStorage');
	component.ngOnInit();
	expect(component.counterService.getFromStorage).toHaveBeenCalled();
	});

	it('should retrieve the last saved value from CounterService on component init', () => {
	jest.spyOn(CounterServiceMock, 'getFromStorage').mockReturnValue(12);
	component.counterService.saveToStorage(12);

AhsanAyaz / ng-cdk-overlay__styles.scss

Last active June 25, 2023 12:05

Angular CDK Overlay (with menu) Default CSS for Angular Cookbook Recipes

AhsanAyaz / ng-cdk-popover-template.html

Last active November 2, 2023 16:11

ng-template for the ng-cdk-popover recipe in Angular Cookbook 2nd Edition

AhsanAyaz / popover-positional-class.directive.ts

Last active June 11, 2023 21:22

Popover Positional Class Angular Directive for Angular Cookbook 2nd Edition Recipe

AhsanAyaz / api.test.ts

Last active February 21, 2023 09:50

TypeScript file with an API call and tests with jest

	import {describe, expect, test} from '@jest/globals';
	import * as API from './api';
	import fetch from 'jest-mock-fetch';

	describe('api module', () => {
	test('addProp should add bootcamp', async () => {
	/**
	* spying on the fetchUser method to check if it is called
	* by addProp
	* we're also mocking a return value from the fetchUser

AhsanAyaz / javascript-questions.json

Last active December 3, 2022 16:15

JavaScript questions JSON

	[
	{
	"question":"Which is the purpose of JavaScript?",
	"answers":{
	"1":"To style HTML Pages",
	"2":"To add interactivity to HTML pages",
	"3":"To perform server side scripting operations"
	},
	"correctAnswerId":"2",
	"id":"1"

	<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]="popoverMenuOrigin!"
	[cdkConnectedOverlayOpen]="menuShown" [cdkConnectedOverlayHasBackdrop]="true"
	(backdropClick)="closeMenu()"
	[cdkConnectedOverlayPositions]="menuPositions"
	cdkConnectedOverlayPanelClass="menu-popover"
	>
	<div class="menu-popover__list">
	<div class="menu-popover__list__item">
	Duplicate
	</div>

	import { AfterViewInit, ChangeDetectorRef, Directive, Input, OnChanges, Renderer2, SimpleChanges, inject } from '@angular/core';

	@Directive({
	selector: '[appPopoverPositionalClass]',
	standalone: true,
	})
	export class PopoverPositionalClassDirective implements AfterViewInit, OnChanges {
	@Input() originY: string \| undefined = 'top';
	@Input() targetSelector!: string;
	@Input() inverseClass = '';