deborahk / angular-experiments

Experimental projects

Angular-Experiments

Experimental projects

angular-experiments's Issues

`WelcomeComponent` is in `home` folder

Angular-Experiments/apm-refresh/src/app/home/welcome.component.ts

Lines 1 to 9 in 446243e

	import { Component } from '@angular/core';
	@Component({
	templateUrl: './welcome.component.html',
	standalone: true
	})
	export class WelcomeComponent {
	public pageTitle = 'Welcome';
	}

It might be confusing that the WelcomeComponent is in the home directory. It would be best to rename home to welcome.

Discriminated unions

Angular-Experiments/apm-refresh/src/app/products/product.ts

Lines 15 to 18 in 446243e

	export interface ProductResolved {
	product: Product | null;
	error?: string;
	}

Rather than use the ProductResolved interface, you could use a discriminated union to get stronger typing and help avoid null references:

export type ProductResolved = {
  status: 'resolved';
  product: Product;
}

export type ProductError = {
  status: 'error';
  error: string;
}

export type ProductResponse = ProductResolved | ProductError;

Then you can use ProductResponse for where you use ProductResolved. Then in your code, you get better contracts:

checkResponse(productResponse: ProductResponse) {
  if (productResponse.status === 'resolved') {
    // productResponse is guaranteed to have a product now
    this.product = productResponse.product;
  
    return;
  }

  // productResponse is guaranteed to have an error now
  console.error('Something bad happened:', productResponse.error
}

Consider using `readonly`

https://github.com/DeborahK/Angular-Experiments/blob/446243e9fa935df4b58f77c978543ac56ded9c1f/apm-refresh/src/app/products/products-observables/product-o-detail.component.ts#L21C1

I like to encourage the use of readonly on properties like this. It makes me feel better when the compiler warns that I tried to change something that shouldn't change.

Shared folders and modules

Angular-Experiments/apm-refresh/src/app/shared/star.component.ts

Lines 1 to 21 in 446243e

	import { Component, OnChanges, Input, EventEmitter, Output } from '@angular/core';
	@Component({
	selector: 'pm-star',
	templateUrl: './star.component.html',
	styleUrls: ['./star.component.css'],
	standalone: true
	})
	export class StarComponent implements OnChanges {
	@Input() rating = 0;
	starWidth = 0;
	@Output() ratingClicked = new EventEmitter<string>();
	ngOnChanges(): void {
	this.starWidth = this.rating * 75 / 5;
	}
	onClick(): void {
	this.ratingClicked.emit(`The rating ${this.rating} was clicked!`);
	}
	}

This could be entirely me, but I find shared folders and modules muddy the waters when separating concerns. I suggest moving components to a components folder and then moving this component to a star folder in the components folder. This way, we know it is a component and don't need to worry if new components belong in shared or somewhere else.