3 |
5 | Products ({{products.length}})
3 | } 4 | 5 |-
6 | @for (product of products; track product.id) {
7 |
- 8 | @switch (product.title) { 9 | @case ('Keyboard') { ⌨️ } 10 | @case ('Microphone') { 🎙️ } 11 | @default { 🏷️ } 12 | } 13 | {{product.title}} 14 | 15 | } @empty { 16 |
No products found!
17 | } 18 |
3 |
5 | You selected: 3 | {{product()!.title}} 4 |
5 |{{product()!.price | currency:'EUR'}}
6 |
7 | @for (cat of product()!.categories | keyvalue; track cat.key) {
8 |
11 |
12 | }
13 |
--------------------------------------------------------------------------------
/ch04/src/app/product-detail/product-detail.component.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { Component, input, output } from '@angular/core';
3 | import { Product } from '../product';
4 |
5 | @Component({
6 | selector: 'app-product-detail',
7 | imports: [CommonModule],
8 | templateUrl: './product-detail.component.html',
9 | styleUrl: './product-detail.component.css'
10 | })
11 | export class ProductDetailComponent {
12 | product = input{{cat.value | lowercase}}
9 | } 10 |Products ({{products.length}})
3 | } 4 | 5 |-
6 | @for (product of products | sort; track product.id) {
7 |
- 8 | @switch (product.title) { 9 | @case ('Keyboard') { ⌨️ } 10 | @case ('Microphone') { 🎙️ } 11 | @default { 🏷️ } 12 | } 13 | {{product.title}} 14 | 15 | } @empty { 16 |
No products found!
17 | } 18 |
3 |
5 | -
2 | @for (product of products | slice:1:3; track product.id) {
3 |
- 4 | ⭐ {{product.title}} 5 | 6 | } 7 |
You selected: 3 | {{product()!.title}} 4 |
5 |{{product()!.price | currency:'EUR'}}
6 |
7 | @for (cat of product()!.categories | keyvalue; track cat.key) {
8 |
11 |
12 | }
13 |
--------------------------------------------------------------------------------
/ch05/src/app/product-detail/product-detail.component.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { Component, input, output } from '@angular/core';
3 | import { Product } from '../product';
4 |
5 | @Component({
6 | selector: 'app-product-detail',
7 | imports: [CommonModule],
8 | templateUrl: './product-detail.component.html',
9 | styleUrl: './product-detail.component.css'
10 | })
11 | export class ProductDetailComponent {
12 | product = input{{cat.value | lowercase}}
9 | } 10 |Products ({{products.length}})
3 | } 4 | 5 |-
6 | @for (product of products | sort; track product.id) {
7 |
- 8 | @switch (product.title) { 9 | @case ('Keyboard') { ⌨️ } 10 | @case ('Microphone') { 🎙️ } 11 | @default { 🏷️ } 12 | } 13 | {{product.title}} 14 | 15 | } @empty { 16 |
No products found!
17 | } 18 |
4 |
6 | You selected: 3 | {{product()!.title}} 4 |
5 |{{product()!.price | currency:'EUR'}}
6 |
7 | @for (cat of product()!.categories | keyvalue; track cat.key) {
8 |
11 |
12 | }
13 |
--------------------------------------------------------------------------------
/ch06/src/app/product-detail/product-detail.component.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { Component, input, output } from '@angular/core';
3 | import { Product } from '../product';
4 |
5 | @Component({
6 | selector: 'app-product-detail',
7 | imports: [CommonModule],
8 | templateUrl: './product-detail.component.html',
9 | styleUrl: './product-detail.component.css'
10 | })
11 | export class ProductDetailComponent {
12 | product = input{{cat.value | lowercase}}
9 | } 10 |Products ({{products.length}})
5 | } 6 | 7 |-
8 | @for (product of products | sort; track product.id) {
9 |
- 10 | @switch (product.title) { 11 | @case ('Keyboard') { ⌨️ } 12 | @case ('Microphone') { 🎙️ } 13 | @default { 🏷️ } 14 | } 15 | {{product.title}} 16 | 17 | } @empty { 18 |
No products found!
19 | } 20 |
4 |
6 | You selected: 3 | {{product()!.title}} 4 |
5 |{{product()!.price | currency:'EUR'}}
6 |
7 | @for (cat of product()!.categories | keyvalue; track cat.key) {
8 |
11 |
12 | }
13 |
--------------------------------------------------------------------------------
/ch07/src/app/product-detail/product-detail.component.ts:
--------------------------------------------------------------------------------
1 | import { CommonModule } from '@angular/common';
2 | import { Component, input, output } from '@angular/core';
3 | import { Product } from '../product';
4 |
5 | @Component({
6 | selector: 'app-product-detail',
7 | imports: [CommonModule],
8 | templateUrl: './product-detail.component.html',
9 | styleUrl: './product-detail.component.css'
10 | })
11 | export class ProductDetailComponent {
12 | product = input{{cat.value | lowercase}}
9 | } 10 |Products ({{products().length}})
3 | } 4 | 5 |-
6 | @for (product of products() | sort; track product.id) {
7 |
- 8 | @switch (product.title) { 9 | @case ('Keyboard') { ⌨️ } 10 | @case ('Microphone') { 🎙️ } 11 | @default { 🏷️ } 12 | } 13 | {{product.title}} 14 | 15 | } @empty { 16 |
No products found!
17 | } 18 |
7 |
9 | Add new product
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/ch08/src/app/product-create/product-create.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ProductsService } from '../products.service';
3 |
4 | @Component({
5 | selector: 'app-product-create',
6 | imports: [],
7 | templateUrl: './product-create.component.html',
8 | styleUrl: './product-create.component.css'
9 | })
10 | export class ProductCreateComponent {
11 | constructor(private productsService: ProductsService) {}
12 |
13 | createProduct(title: string, price: string, category: string) {
14 | this.productsService.addProduct({
15 | title,
16 | price: Number(price),
17 | category
18 | }).subscribe();
19 | }
20 |
21 | }
22 |
--------------------------------------------------------------------------------
/ch08/src/app/product.ts:
--------------------------------------------------------------------------------
1 | export interface Product {
2 | id: number;
3 | title: string;
4 | price: number;
5 | category: string;
6 | }
7 |
--------------------------------------------------------------------------------
/ch08/src/app/products.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { ProductsService } from './products.service';
4 |
5 | describe('ProductsService', () => {
6 | let service: ProductsService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(ProductsService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/ch08/src/app/sort.pipe.spec.ts:
--------------------------------------------------------------------------------
1 | import { SortPipe } from './sort.pipe';
2 |
3 | describe('SortPipe', () => {
4 | it('create an instance', () => {
5 | const pipe = new SortPipe();
6 | expect(pipe).toBeTruthy();
7 | });
8 | });
9 |
--------------------------------------------------------------------------------
/ch08/src/app/sort.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 | import { Product } from './product';
3 |
4 | @Pipe({
5 | name: 'sort'
6 | })
7 | export class SortPipe implements PipeTransform {
8 |
9 | transform(value: Product[], args: keyof Product = 'title'): Product[] {
10 | if (value) {
11 | return value.sort((a: Product, b: Product) => {
12 | if (a[args] < b[args]) {
13 | return -1;
14 | } else if (b[args] < a[args]) {
15 | return 1;
16 | }
17 | return 0;
18 | });
19 | }
20 | return [];
21 | }
22 |
23 | }
24 |
--------------------------------------------------------------------------------
/ch08/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{ settings.title }}
3 | 4 | 9 |
13 |
15 | cart works!
2 | -------------------------------------------------------------------------------- /ch09/src/app/cart/cart.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CartComponent } from './cart.component'; 4 | 5 | describe('CartComponent', () => { 6 | let component: CartComponent; 7 | let fixture: ComponentFixtureAdd new product
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/ch09/src/app/product.ts:
--------------------------------------------------------------------------------
1 | export interface Product {
2 | id: number;
3 | title: string;
4 | price: number;
5 | category: string;
6 | }
7 |
--------------------------------------------------------------------------------
/ch09/src/app/products.resolver.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { ResolveFn } from '@angular/router';
3 |
4 | import { productsResolver } from './products.resolver';
5 |
6 | describe('productsResolver', () => {
7 | const executeResolver: ResolveFnuser works!
2 | -------------------------------------------------------------------------------- /ch09/src/app/user/user.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserComponent } from './user.component'; 4 | 5 | describe('UserComponent', () => { 6 | let component: UserComponent; 7 | let fixture: ComponentFixture{{ settings.title }}
3 | 4 | 9 |
13 |
15 |
2 |
9 |
--------------------------------------------------------------------------------
/ch10/src/app/cart/cart.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CartComponent } from './cart.component';
4 |
5 | describe('CartComponent', () => {
6 | let component: CartComponent;
7 | let fixture: ComponentFixture
3 | @for(product of cartForm.controls.products.controls; track $index) {
4 |
5 |
6 | }
7 |
8 | user works!
2 | -------------------------------------------------------------------------------- /ch10/src/app/user/user.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserComponent } from './user.component'; 4 | 5 | describe('UserComponent', () => { 6 | let component: UserComponent; 7 | let fixture: ComponentFixture{{ settings.title }}
3 | 4 | 9 |
13 |
15 |
2 |
9 |
--------------------------------------------------------------------------------
/ch11/src/app/cart/cart.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CartComponent } from './cart.component';
4 |
5 | describe('CartComponent', () => {
6 | let component: CartComponent;
7 | let fixture: ComponentFixture
3 | @for(product of cartForm.controls.products.controls; track $index) {
4 |
5 |
6 | }
7 |
8 | user works!
2 | -------------------------------------------------------------------------------- /ch11/src/app/user/user.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserComponent } from './user.component'; 4 | 5 | describe('UserComponent', () => { 6 | let component: UserComponent; 7 | let fixture: ComponentFixture
2 |
15 |
--------------------------------------------------------------------------------
/ch12/src/app/cart/cart.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CartComponent } from './cart.component';
4 |
5 | describe('CartComponent', () => {
6 | let component: CartComponent;
7 | let fixture: ComponentFixture
3 | @for(product of cartForm.controls.products.controls; track $index) {
4 |
5 | {{products[$index].title}}
6 |
11 |
12 | }
13 |
14 | Cart Checkout
2 |user works!
2 | -------------------------------------------------------------------------------- /ch12/src/app/user/user.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserComponent } from './user.component'; 4 | 5 | describe('UserComponent', () => { 6 | let component: UserComponent; 7 | let fixture: ComponentFixture{{ item }}
12 | } 13 | ` 14 | }) 15 | export class AsyncComponent implements OnInit { 16 | items$: Observable{{ title() }}
9 | 10 | ` 11 | }) 12 | export class BindingsComponent { 13 | title = input(''); 14 | liked = output(); 15 | } 16 | -------------------------------------------------------------------------------- /ch13/src/app/copyright.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[appCopyright]' 5 | }) 6 | export class CopyrightDirective { 7 | 8 | constructor(el: ElementRef) { 9 | const currentYear = new Date().getFullYear(); 10 | const targetEl: HTMLElement = el.nativeElement; 11 | targetEl.classList.add('copyright'); 12 | targetEl.textContent = `Copyright ©${currentYear} All Rights Reserved`; 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /ch13/src/app/deps.service.ts: -------------------------------------------------------------------------------- 1 | import { HttpClient } from '@angular/common/http'; 2 | import { Injectable } from '@angular/core'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class DepsService { 8 | 9 | constructor(private http: HttpClient) { } 10 | 11 | getItems() { 12 | return this.http.get('http://some.url'); 13 | } 14 | 15 | addItem(item: string) { 16 | return this.http.post('http://some.url', { name: item }); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /ch13/src/app/items.resolver.ts: -------------------------------------------------------------------------------- 1 | import { ResolveFn } from '@angular/router'; 2 | import { AsyncService } from './async.service'; 3 | import { inject } from '@angular/core'; 4 | 5 | export const itemsResolver: ResolveFn
2 |
15 |
--------------------------------------------------------------------------------
/ch15/src/app/cart/cart.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { CartComponent } from './cart.component';
4 |
5 | describe('CartComponent', () => {
6 | let component: CartComponent;
7 | let fixture: ComponentFixture
3 | @for(product of cartForm.controls.products.controls; track $index) {
4 |
5 | {{products[$index].title}}
6 |
11 |
12 | }
13 |
14 | Cart Checkout
2 |user works!
2 | -------------------------------------------------------------------------------- /ch15/src/app/user/user.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserComponent } from './user.component'; 4 | 5 | describe('UserComponent', () => { 6 | let component: UserComponent; 7 | let fixture: ComponentFixture