Zoaib thisiszoaib

Senior Angular Developer | Udemy & YouTube Instructor

thisiszoaib / Sample data for Ecommerce tutorial

Last active November 14, 2025 14:06

	[
	// Electronics
	{
	id: '1',
	name: 'Wireless Noise-Cancelling Headphones',
	description:
	'Premium wireless headphones with active noise cancellation and 30-hour battery life',
	price: 299.99,
	imageUrl:
	'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&w=400&q=80',

thisiszoaib / styles.scss

Created October 9, 2025 04:51

Angular Material Custom Theme for Ecommerce App

	// Include theming for Angular Material with `mat.theme()`.
	// This Sass mixin will define CSS variables that are used for styling Angular Material
	// components according to the Material 3 design spec.
	// Learn more about theming and how to use it for your application's
	// custom components at https://material.angular.dev/guide/theming
	@use '@angular/material' as mat;
	@use 'tailwindcss';

	html {
	@include mat.theme(

thisiszoaib / app.module.ts

Last active January 30, 2022 07:01

Loader Network Interceptor

	@NgModule({
	declarations: [AppComponent],
	imports: [
	BrowserModule
	],
	providers: [
	{
	provide: HTTP_INTERCEPTORS,
	useClass: NetworkInterceptor,
	multi: true

thisiszoaib / app.component.html

Created January 5, 2021 05:17

Chips 10

	<div class="content">

	<app-chips-multi-select [options]="options" [formControl]="chipsControl">
	</app-chips-multi-select>

	<mat-divider></mat-divider>

	<h3>Value: {{chipsControlValue$ \| async}}</h3>

	<mat-divider></mat-divider>

thisiszoaib / chips-multi-select.component.ts

Created January 5, 2021 05:15

Chips 9

	@Component({
	selector: 'app-chips-multi-select',
	templateUrl: './chips-multi-select.component.html',
	styleUrls: ['./chips-multi-select.component.scss'],
	providers: [
	{
	provide: NG_VALUE_ACCESSOR,
	useExisting: ChipsMultiSelectComponent,
	multi: true,
	},

thisiszoaib / chips-multi-select.component.ts

Created January 5, 2021 05:14

Chips 8

	disabled = false;

	setDisabledState?(isDisabled: boolean): void {
	this.disabled = isDisabled;
	}

	toggleSelection(chip: MatChip) {
	if (!this.disabled) chip.toggleSelected();
	}

thisiszoaib / chips-multi-select.component.ts

Created January 5, 2021 05:12

Chips 8

	ngAfterViewInit() {

	this.chipList.chipSelectionChanges
	.pipe(
	untilDestroyed(this),
	map((event) => event.source))
	.subscribe((chip) => {

	if (chip.selected) {
	this.value = [...this.value, chip.value];

thisiszoaib / chips-multi-select.component.ts

Created January 5, 2021 05:11

Chips 7

	@ViewChild(MatChipList) chipList!: MatChipList;

	value: string[] = [];

	writeValue(value: string[]): void {
	// When form value set when chips list initialized
	if (this.chipList && value) {
	this.selectChips(value);
	} else if (value) {
	// When chips not initialized

thisiszoaib / chips-multi-select.component.ts

Created January 5, 2021 05:10

Chips 6

	onChange!: (value: string[]) => void;

	registerOnChange(fn: any): void {
	this.onChange = fn;
	}

	propagateChange(value: string[]) {
	if (this.onChange) {
	this.onChange(value);
	}

thisiszoaib / chips-multi-select.component.ts

Created January 5, 2021 05:09

Chips 5

	export class ChipsMultiSelectComponent implements OnInit, ControlValueAccessor {

	writeValue(value: string[]): void {
	}

	registerOnChange(fn: any): void {
	}

	registerOnTouched(fn: any): void {
	}